Works like a charm. Many thanks. =)
On Jun 15, 3:49 pm, Karl Swedberg <[email protected]> wrote: > Hi Dave, > > This should get you started: > > <script type="text/javascript"> > $(function(){ > $( "#divCodeArea" ) > .mouseover(function(event) { > $(event.target).addClass('outlineElement'); > }) > .mouseout(function(event) { > $(event.target).removeClass('outlineElement'); > }) > .click(function(event) { > $(event.target).toggleClass('outlineElementClicked'); > }); > }); > </script> > <style type="text/css"> > #divCodeArea > { > border: solid 2px gold; > padding: 10px; > } > .outlineElementClicked, > .outlineElement > { > outline: 1px solid red; > } > </style> > > Note, I changed border to outline so it wouldn't mess with the > elements' dimensions. > > --Karl > > ____________ > Karl Swedbergwww.englishrules.comwww.learningjquery.com > > On Jun 15, 2009, at 7:36 AM, Dave wrote: > > > > > > > Hi > > > Am a jquery novice and are trying to make code that adds a hover event > > to all html elements within a certain container. On hover the element > > should be outlined by adding/removiing a css class. Thats the first > > thing and I can't get that to work with the code below. > > The second part is to keep the element outlined when its clicked, and > > also when selecting multiple elements by (ctrl+click). > > > Have searched for a outline plugin, but came up with nothing. > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > > "http:// > >www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > > <html xmlns="http://www.w3.org/1999/xhtml";> > > <head> > > <title></title> > > <script type="text/javascript" src="js/jquery.js"></script> > > <script language="JavaScript" type="text/javascript"> > > $(function(){ > > $( "#divCodeArea" ).each(function() > > { > > $(this).hover > > ( > > function() > > { > > $(this).addClass("outlineElement"); > > }, > > function() > > { > > $(this).removeClass("outlineElement"); > > } > > ); > > } > > ); > > }); > > </script> > > <style type="text/css"> > > #divCodeArea > > { > > border: solid 2px gold; > > padding: 10px; > > } > > .outlineElement > > { > > border: solid 1px red; > > } > > </style> > > </head> > > <body> > > <div id="divCodeArea"> > > <div> > > 1111111111111111111111111</div> > > <div> > > 2222222222222222222222222</div> > > <p> > > 333 <span>4444</span> 55555 <span>666666</span></p> > > <span>7777777</span> > > <ul> > > <li>AAAA</li> > > <li>BBBB</li> > > <li>CC<span>XX</span></li> > > <li>DDDD</li> > > <li>EEEE</li> > > <li>FFFF</li> > > </ul> > > </div> > > </body> > > </html> > > > /Cheers- Hide quoted text - > > - Show quoted text -
