Question

我正在尝试修改以下脚本以仅在“？”时显示/隐藏提示徘徊在整个“li”座上

HTML：

<ul class="tips">
<li>
    <a href="#" class="tooltip">?</a> Feature 1
    <div class="tip">
    <h4>Tip Title 1</h4>
    <h4>Tip Q</h4>
    <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>

JQuery脚本

$("ul.tips li").hover(function() {
    $(this).find("div").stop()
    .fadeIn()
    .css("display","block")

}, function() {
    $(this).find("div").stop()
    .fadeOut()
});

CSS：

.tips div  {
display: none;
position: absolute;
bottom: 0;
width: 100%;
height;auto;
background: #e00;
left:0;
}

我试图像这样修改脚本

$("ul.tips li a").hover(function() {

所以它以“a”标签为目标，但最终没有显示任何内容。

Answer 1

这似乎很不寻常，因为它似乎应该有效，但请尝试：

$(".tooltip").hover(function() { ... });

您还应该将$(this).find("div")...更改为$(this).next()...

Answer 2

你需要结束你的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
});

Answer 3

您需要确保将事件处理程序包装在jQuery的文档就绪函数中：

$(document).ready(function () {
$("ul.tips li").hover(function() {
    $(this).find("div").stop()
    .fadeIn()
    .css("display","block")

}, function() {
    $(this).find("div").stop()
    .fadeOut()
});
});

除非html元素已经加载到DOM树中，否则您的悬停事件不会绑定到html元素。 $(document).ready()延迟运行包含在传递的匿名函数中的JS，直到加载了其余的html文档并且DOM树已准备就绪。

更多阅读：http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

JQuery Hover提示

3 个答案: