Question

将鼠标悬停在图片上时，我想显示列表项。我的问题是，我不确定如何只调用我正在使用jquery徘徊的li。

HTML

<ul class="test">
<li><img></li>
<li class="hidden"><img></li>
<li><img></li>
<li class="hidden"><img></li>
</ul>

CSS

.test .hidden { display:none; }

JQUERY

$(document).ready(function(){
    $(this).find(".test li img").hover(function(){
         $(this).find('.test .hidden').show();
      },function(){
         $(this).find('.test .hidden').hide();
      });
});

Answer 1

您可以在css中使用以下代码，而不使用JQUERY：

li:hover{ 
    display:block;
}

html代码：

<ul >
<li> test<img src="https://placehold.it/350x150"/></li>
<li>test<img src="https://placehold.it/350x150"/></li>
<li>test<img src="https://placehold.it/350x150"/></li>
</ul>

css代码：

li:hover >img{display:block !important;}

Jsfiddle Link

Answer 2

没有办法将鼠标悬停在隐藏的项目上，另一种方式非常简单。

这是一个JSFiddle（下次提示......在提出问题之前这样做。）

(without any CSS at all...)

<ul class="test">test
<li><img src="https://placehold.it/350x150"/></li>
<li><img src="https://placehold.it/350x150"/></li>
<li><img src="https://placehold.it/350x150"/></li>
</ul>

$(document).ready(function(){
    $(".test li img").hover(function(){
         alert("Hello there.");
         $(this).hide();
      });
});

究竟你想要完成什么？

更新：JSfiddle你必须有一些东西悬停在上面，即使它有一些“nonBlankingSpaceCharacters”这里我正在使用无序列表的点。（事实上，当我看到这个时，在那个JSfiddle上，<li>元素具有100％的显示宽度，因此它很容易捕获鼠标悬停事件。）

.test li img{display: none;}
img:hover { outline: dotted red; }

<ul class="test">test
<li><img src="https://placehold.it/350x150"/></li>
<li><img src="https://placehold.it/350x150"/></li>
<li><img src="https://placehold.it/350x150"/></li>
</ul>

$(document).ready(function(){
    $(".test li").hover(function(){
         //alert("Hello there.");
         $(this).children("img").show();
      });
});

一个不错的参考是Mozilla Developer Network posting on Hover event.请看DropDown菜单说明。

Answer 3

我为你创造了一个小提琴。看看吧。

<ul class="test">
<li><span class="image">Image 1</span></li>
<li class="hidden"><img>showthis</li>
<li><span class="image">Image 2</span></li>
<li class="hidden"><img>showthis</li>
</ul>

.test .hidden { display:none; }

$(document).ready(function(){
    $(".test li .image").mouseover(function(){
        $(this).parent('li').next('li').removeClass("hidden");
    });

    $(".test li .image").mouseout(function(){
         $(this).parent('li').next('li').addClass("hidden");
    });
});

https://jsfiddle.net/swaprks/2zs1sq65/

在图像悬停时显示列表项

3 个答案: