在图像悬停显示列表项

On image hover show the list item

本文关键字：列表 显示 悬停 图像      更新时间：2023-09-26

悬停在图像上，我想显示列表项。我的问题是，我不完全确定如何只调用我使用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();
      });
});

您可以在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链接

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

<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/

没有办法将鼠标悬停在隐藏项上，另一种方法很简单。

这是一个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你必须有一些东西悬停，即使它的一些"nonblankingspacecharters"在这里我使用点无序列表。(事实上，在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发布的Hover事件。查看下拉菜单描述
相关文章：