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

之后将课程.Search添加到img

<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

在鼠标上显示搜索图标

1 个答案: