Question

我想检测哪个li是当前的并且用javascript分别悬停在它上面的正确图像。我做了这个例子http://jsfiddle.net/zvkerfLg/2/

<ul class="box" id="box" style="margin:100px 0px 0px 100px">
<li class="inner-box" id="bx1">
    <a href="#" target="_blank" onmouseover="onhover()">
        <img src="http://s30.postimg.org/dd01lyrjx/first.png" alt="image"/>
        <div class="over"></div>   
     </a>  
</li>
<li class="inner-box" id="bx2">
    <a href="#" target="_blank" onmouseover="onhover()">
        <img src="http://s30.postimg.org/dd01lyrjx/first.png" alt="image"/>
        <div class="over"></div>   
     </a>  
</li>
</ul> 

var onhover = $(".inner-box").hover(function() {

   $('.over').css({"left":"0", "right":"auto", "background-position":"left"});
   $('.over').animate({width:"100px"}, 150);

});

我无法理解如何使用javascript选择悬停的li。在我的例子中，当悬停到一个方框时，它们都会改变颜色，但我只想要那些悬停的特定颜色。

Answer 1

从元素中删除onmouseover并将您的jquery代码更改为此..

$(".inner-box").hover(function() {

    $('.over', $(this)).css({"left":"0", "right":"auto", "background-position":"left"});
    $('.over', $(this)).animate({width:"100px"}, 150);

});

DEMO

要改变对鼠标移动的影响，您可以执行以下操作，请注意我删除了很多.css代码，因为它实际上并没有做任何事情......

$(".inner-box").hover(function() {
    $('.over', $(this)).animate({width:"100px"}, 150);

}, function() {
    $('.over', $(this)).animate({width:"0px"}, 150);
});

DEMO

Answer 2

$(this).find('.over').css({"left":"0", "right":"auto", "background-position":"left"});
$(this).find('.over').animate({width:"100px"}, 150);

以上可能会奏效。

在事件调用的函数中，'this'将始终是调用事件的对象。然后，find将获取位于您的悬停元素下的.over元素，然后执行其操作。

Answer 3

尝试将您的选择器更改为$(this).find('.over')，例如：

var onhover = $(".inner-box").hover(function() {

    $(this).find('.over').css({"left":"0", "right":"auto", "background-position":"left"});
    $(this).find('.over').animate({width:"100px"}, 150);

});

http://jsfiddle.net/zvkerfLg/5/

你甚至可以像这样链接函数调用：

$(this)
  .find('.over')
  .css({"left":"0", "right":"auto", "background-position":"left"})
  .animate({width:"100px"}, 150);

检测哪个li和单独悬停

3 个答案: