在鼠标上显示搜索图标

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

或添加类.hover上课后，IMG .Search

<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

的simpliest方式是这样的：

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

THE DEMO

去你conbine它，你有这样的事情：

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

或本：

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

THE DEMO