CODEWITHSUNDEEP
jquerycss
John23
John23

Reputation: 219

Show Search Icon on Mouse over

I'm trying to when the mouse over my image show an icon search, but I'm not having the right results. Can anyone help? Any tip is welcome!

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

My jQuery:

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

Upvotes: 0

Views: 1041

Answers (1)

Gildas.Tambo
Gildas.Tambo

Reputation: 22653

This is a pure css effect you don't need js for that checkout 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>

the 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

or this 

#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

or this 

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

THE DEMO

or add class .hover to the img after class .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>

the css

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

or 

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

THE DEMO

the simpliest way is this:

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

THE DEMO

went you conbine it you have something like this:

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

or this:

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

THE DEMO

Upvotes: 1

Related Questions