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.
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.
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');
});
Give all the links the same class and then do this:
$(document).ready(function() {
$('.someClass').hover(function() {
$('.someClass').css('underline' : 'solid 1px #FFF');
});
})
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()
.
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 :(
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;}
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.