jquery - 在鼠标悬停时显示搜索图标

Question

我正在尝试当鼠标悬停在我的图像上时显示图标搜索，但我没有得到正确的结果。谁能帮忙？欢迎任何提示!

我的 html:

<article id="posts">
    <img class="search src="images/search.png"/>
    <img src="images/image1.jpg"  />
    <h2>Title 1</h2>
    <p>lorem ipsum 1</p>
</article>

我的 jQuery:

var search = $('<img src="path/to/search/icon.png" class="search" />');
$('.search').hover( function(){
    $(this).append(search);
});

Answer 1

这是一个纯 css 效果，你不需要 js 来实现结帐 css :hover

<article id="posts">
   <img class="search" src="http://lorempixel.com/400/200/food/1/" />
   <img src="http://lorempixel.com/400/200/food/2/" />
   <h2>Title 1</h2>
   <p>lorem ipsum 1</p>
</article>

CSS

#posts img:nth-of-type(2){display:none}
#posts:hover img.search{display:none}
#posts:hover img:nth-of-type(2){display:inline-block}

THE DEMO

或者这个

#posts img:nth-of-type(2){display:none}
#posts:hover img:nth-of-type(1){display:none}
#posts:hover img:nth-of-type(2){display:inline-block}

THE DEMO

或者这个

#posts img.search +img{display:none}
#posts:hover img.search{display:none}
#posts:hover img.search +img{display:inline-block}

THE DEMO

或者在class .Search之后的img中添加class .hover

<article id="posts">
   <img class="search" src="http://lorempixel.com/400/200/food/1/" />
   <img class="hover" src="http://lorempixel.com/400/200/food/2/" />
   <h2>Title 1</h2>
   <p>lorem ipsum 1</p>
</article>

CSS

#posts img.hover{display:none}
#posts:hover img.search{display:none}
#posts:hover img.hover{display:inline-block}

或

#posts .hover{display:none}
#posts:hover .search{display:none}
#posts:hover .hover{display:inline-block}

THE DEMO

最简单的方法是这样的:

#posts:not(:hover) img.hover{display:none}
#posts:hover img.search{display:none}

THE DEMO

你把它结合起来你有这样的东西:

#posts:not(:hover) img.hover,#posts:hover img.search{display:none}

或者这个:

#posts:not(:hover) .hover,#posts:hover .search{display:none}

THE DEMO