jQuery:在悬停时只显示一个,而不是全部

时间:2011-07-22 20:15:46

标签: jquery hover hide show mouseenter

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

脚本:

<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;
}

5 个答案:

答案 0 :(得分: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> 

Testing this in 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>标记内,这样当它扩展时鼠标仍然在它上面。试试上面的链接,看看你是如何继续这样做的。

答案 1 :(得分:1)

像这样修改处理程序:

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

$(this)指的是当前li,并且基本上会找到“在此divs中找到li”。

答案 2 :(得分: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...
});

...

答案 3 :(得分: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);});
    });         
});

答案 4 :(得分:0)

http://jsfiddle.net/KETBA/

^那就是

抱歉......蹩脚的描述是蹩脚的