1

我想知道如何使我的脚本仅将效果应用于当前悬停的列表项，而不是无序列表中的每个列表项。

脚本：

<script> 
$(document).ready(function() {
    // Initially hide                      
    $("ul#navigation li div.chLeft,ul#navigation li div.chRight").hide();
    // Show Effect
    $("ul#navigation li").mouseenter(function(){
        $("ul#navigation li div.chLeft,ul#navigation li div.chRight").show(function(){$(this).fadeIn(500);});
    }); 
    // Hide Effect
    $("ul#navigation li").mouseleave(function(){
        $("ul#navigation li div.chLeft,ul#navigation li div.chRight").hide(function(){$(this).fadeOut(100);});
    });         
});
</script>

加价：

<ul id="navigation">
    <li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
    <li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
    <li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
    <li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
    <li><div class="chLeft"></div><div class="floatLeft"><a href="#">Link</a></div><div class="chRight"></div><div class="clear"></div></li>
</ul>

CSS：

#navigation{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    list-style: none;
}
#navigation li{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    line-height: 45px;
}
#navigation li a{
    position: relative;
    padding: 0 21px;
    height: 45px;
    color: #780507;
    display: block;
    outline: none;
    text-decoration: none;
    line-height: 90px;  
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    text-shadow: 0px 0px 1px #430304;
    letter-spacing: 1px;
}
.chLeft{
    width: 30px;
    height: 75px;
    background: url('../img/sprite.png') -10px -5px no-repeat;
    float: left;
}
.chRight{
    width: 30px;
    height: 75px;
    background: url('../img/sprite.png') -100px -5px no-repeat;
    float: left;
}
.floatLeft{
    float: left;
}
4

5 回答 5

2

您将this在事件处理程序中使用运算符，以便引用此匹配而不是匹配所有这些：

<script> 
$(document).ready(function() {
    // Initially hide                      
    $("ul#navigation li div.chLeft,ul#navigation li div.chRight").hide();
    // Show Effect
    $("ul#navigation li").mouseenter(function(){
        $(this).find("div.chLeft, div.chRight").show(function(){$(this).fadeIn(500);});
    }); 
    // Hide Effect
    $("ul#navigation li").mouseleave(function(){
        $(this).find("div.chLeft, div.chRight").hide(function(){$(this).fadeOut(100);});
    });         
});
</script>

在 jsfiddle 中对此进行测试会产生一些奇怪的效果，因为在动画时，鼠标将不再位于链接上方，因此触发 mouseout 事件会导致很多波纹动画。

我将标记更改为这个，它更稳定一些，但如果没有看到上下文中的图形和页面，很难说出你想要实现的目标：

<ul id="navigation">
        <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></li>
      <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></l
        <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></li>
        <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></li>
        <li><div class="floatLeft"><a href="#"><div class="chLeft"></div>Link<div class="chRight"></div></a></div></li>
</ul>

在这个更新的 html 片段中，我将 chLeft 和 chRight 放在<a>标签内，这样当它展开时，鼠标仍然在它上面。试试上面的链接，看看你是怎么做的。

于 2011-07-22T20:22:08.073 回答
1

像这样修改你的处理程序：

$("ul#navigation li").mouseenter(function(){
    $(this).find("div.chLeft,div.chRight").show(function(){$(this).fadeIn(500);});
});

$(this)指的是当前li，find 基本上是说“divs在这个里面找到li”。

于 2011-07-22T20:21:27.450 回答
1

...

$("ul#navigation li").mouseenter(function(){
    $(this).find("div.chLeft").fadeIn(500);
    $(this).find("div.chRight").fadeIn(500);
    // it would be better to add them both a single class, then find that class once and apply fadeIn effect...
});

...

于 2011-07-22T20:21:54.040 回答
0

不会使用 $(this) 帮助吗？

$(document).ready(function() {
    // Initially hide                      
    $("ul#navigation li div.chLeft,ul#navigation li div.chRight").hide();
    // Show Effect
    $("ul#navigation li").mouseenter(function(){
        $(this).show(function(){$(this).fadeIn(500);});
    }); 
    // Hide Effect
    $("ul#navigation li").mouseleave(function(){
        $(this).hide(function(){$(this).fadeOut(100);});
    });         
});
于 2011-07-22T20:22:43.753 回答
0

http://jsfiddle.net/KETBA/

^ 就是这样

对不起...蹩脚的描述是蹩脚的

于 2011-07-22T20:24:14.353 回答