views:

63

answers:

6

Hi,

I have div with a few links spread out in the content. I would like to highlight all the links in the div onmouseover. Is there jquery solution that works in FF, IE and chrome.

Thanks.

A: 

something like this (in your document ready) should do it!

$('#MyDiv').live('mouseenter', function(){
    $(this).find('a').addClass('highlight');
});
$('#MyDiv').live('mouseleave', function(){
    $(this).find('a').removeClass('highlight');
});
Patricia
A: 

Give all the links the same class and then do this:

$(document).ready(function() {
  $('.someClass').hover(function() {
    $('.someClass').css('underline' : 'solid 1px #FFF');
  });
})
Catfish
A: 

If I remember correctly, you should be able to just do:

$('div selector').hover(function(e) {
    $(this).find('a').doThings();
},
function(e) {
    $(this).find('a').undoThings();
});

I'd also suggest switching the explicit $.hover() call (just provided as an example) to use $.delegate() or $.live().

mway
+3  A: 

How about no JavaScript?

Style.CSS

.linkdiv a {
   color: blue;
}

.linkdiv:hover a {
   color: red;
}

I wanted to test this, but sadly jsfiddle isn't iPhone compatible :(

mkoistinen
+1 for the dedication of answering via iPhone. That's a test of frustration and patience all in itself (**why** is there no back-tick on the standard keyboard?)
David Thomas
You can `back-tick` on the iPhone, just press and hold the single-quote mark. It'll appear in the pop-up! =)
mkoistinen
@mkoistinen, it might be an international-keyboard issue, then. Holding the apostrophe/single quote-mark gives a smart left-quote, smart right-quote and a regular single-quote. I'm using English (UK), which one're you using?
David Thomas
I'm also using English UK. I'm using iOS 4.1 on the iPhone 4, you? PS, are you the David Thomas I know in real life?
mkoistinen
@mkoistinen, I don't think I am. Unless you happen to know a devilishly handsome hobbyist (x)html/css/js developer that works in healthcare? =D I'm using an iPhone 3 (not even 3g), probably iOS 4 now I think of it. I'll attend to that as soon as I can be bothered to turn the Windows box on again =)
David Thomas
No, the one I know is a currency trader. Popular name, I guess.
mkoistinen
+2  A: 

The Best Solution, As far as my concern =)

Markup :

<h1>CSS is cool! </h1>
<ul id="css">
    <li><a class="links" href="#"> Link1 </a></li>  
    <li><a class="links" href="#"> Link2 </a></li>  
    <li><a class="links" href="#"> Link3 </a></li>  
    <li><a class="links" href="#"> Link4 </a></li>
</ul>

CSS :

 #css li { margin:0px 5px;list-style:none; float:left;}
 #css .links { color :#0099f9; text-decoration:none;font:bold 20px Arial;}
 #css:hover a.links { color : #f0f;}
Ninja Dude
I could be wrong, but I think the OP wants all the links to highlight when the user hovers over the whole parent div.
mkoistinen
ohh yes sir, seems like I haven't read the question properly, updating !
Ninja Dude
+2  A: 

Demo

HTML:

<div id='links'>
    This is simple text<br />
    <a href='#'>Link1<a/><br />
    <a href='#'>Link2<a/><br />
    <a href='#'>Link3<a/><br />
</div>

jQuery:

$('#links').live('mouseover', function(){
    $('#links > a').addClass('highlight');
});

$('#links').live('mouseout', function(){
    $('#links > a').removeClass('highlight');
});

CSS:

.highlight {
 background-color : red;   
}​



You can edit CSS part to highlight in your favorite style.

NAVEED