JQuery Hover Tip
I am trying to modify the following script to show/hide the Tip only when the "?" is hovered on and not the entire "li" Block
The HTML:
<ul class="tips">
<li>
<a href="#" class="tooltip">?</a> Feature 1
<div class="tip">
<h4>Tip Title 1</h4>
<h4>Tip Q</h开发者_Python百科4>
<p>Tip A</p>
</div>
</li>
<li>
<a href="#" class="tooltip">?</a> Feature 2
<div class="tip">
<h4>Tip Title 2</h4>
<h4>Tip Q</h4>
<p>Tip A</p>
</div>
</li>
<li>
<a href="#" class="tooltip">?</a> Feature 3
<div class="tip">
<h4>Tip Title 3</h4>
<h4>Tip Q</h4>
<p>Tip A</p>
</div>
</li>
</ul>
The JQuery script
$("ul.tips li").hover(function() {
$(this).find("div").stop()
.fadeIn()
.css("display","block")
}, function() {
$(this).find("div").stop()
.fadeOut()
});
The CSS:
.tips div {
display: none;
position: absolute;
bottom: 0;
width: 100%;
height;auto;
background: #e00;
left:0;
}
I have tried to modify the script like so
$("ul.tips li a").hover(function() {
so it targets the "a" tag but the it ends up not showing anything.
You need to end your lines of js:
$("ul.tips li a").hover(function() {
$(this).siblings("div.tip").stop()
.fadeIn()
.css("display","block"); // <-- gotta put the semi-colon
}, function() {
$(this).siblings("div.tip").stop()
.fadeOut(); //<-- here too
});
That seems unusual as it seems like it should work, but try:
$(".tooltip").hover(function() { ... });
You should also change the $(this).find("div")...
to $(this).next()...
You need to make sure that you wrap your event handler in the in jQuery's document ready function:
$(document).ready(function () {
$("ul.tips li").hover(function() {
$(this).find("div").stop()
.fadeIn()
.css("display","block")
}, function() {
$(this).find("div").stop()
.fadeOut()
});
});
Your hover event won't bind to the html elements unless the html elements have been loaded into the DOM tree already. $(document).ready()
delays running the JS included in the passed anonymous function until the rest of the html document is loaded and the DOM tree is ready.
More reading at: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
精彩评论