在鼠標上顯示搜索圖標

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