How to highlight links in the div on mouseover
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开发者_JAVA百科 in FF, IE and chrome.
Thanks.
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 :(
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.
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;}
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()
.
精彩评论