CODEWITHSUNDEEP
jquerycss
John23
John23

Reputation: 219

Show icon in center of image on mouse hover

I've been trying for a few days to show a search icon in a center of my 159 by 149 image on mouse hover. But I'm always getting some problem and now I don't understand what is happening. Can anyone that already tried to do this exercise give some help? Thanks!

HTML:

<article class="posts">
    <div style="float:left; position:relative;position: relative; clear: both; background-size:contain; background-image: url('imagens/image1.png'); width: 159px; height: 149px; padding-right: 10px; background-repeat: no-repeat;">
        <a href="#" class="search_icon_hover" style="display: none; margin-left: 0px; background-color:#666; opacity:0.9; transition: 0.3s; position:absolute; top:0; bottom: 0; left:0; right: 0;">
            <span id="icon_search"><I class ="fa fa-search-plus" > </I>Hover</span>
        </a>
    </div>
</article>

jQuery:

$(document).ready(function(){

    $(".posts").mouseenter(function(e){
        console.log('enter');
        $((e.toElement)).find('a.search_icon_hover').show();
    }).mouseleave(function(elemento) {
        $((e.toElement)).find('a.search_icon_hover').hide();
    });;
});

Upvotes: 0

Views: 2550

Answers (2)

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

Check this LIVE

HTML

<article class="posts">
    <div style="float:left; position:relative;position: relative; clear: both; background-size:contain; background-image: url('imagens/image1.png'); width: 159px; height: 149px; padding-right: 10px; background-repeat: no-repeat;">
          <a href="#" class="search_icon_hover" style="background-color:#666; opacity:0.9; transition: 0.3s; position:absolute; top:0; bottom: 0; left:0; right: 0;text-align:center;vertical-align: middle;padding-top:62px;">
             <span id="icon_search">Hover</span>
         </a>
    </div>
</article>

JQuery

$(document).ready(function(){

    $(".posts").mouseenter(function(e){
        console.log('enter');
        $((e.toElement)).find('a.search_icon_hover').show();
    }).mouseleave(function(e) {
        $((e.toElement)).find('a.search_icon_hover').hide();
    });;
});

Upvotes: 0

Serlite
Serlite

Reputation: 12258

Hm...well, the problem primarily lies with your usage of e.toElement. If you try to run this code:

$(".posts").mouseenter(function(e){
    console.log(e.toElement);
});

You'll find that e.toElement is actually returning undefined. Rather than using this approach, let's use the this keyword instead. (Here's some information about it, if you were curious to know more.) Your JavaScript would therefore be:

$(document).ready(function(){
    $(".posts").mouseenter(function(){
        $(this).find('a.search_icon_hover').show();
    }).mouseleave(function() {
        $(this).find('a.search_icon_hover').hide();
    });
});

Here's a JSFiddle to demonstrate the script in action. I think it produces the behaviour you're seeking. Isn't this great? Hope this helped! Let me know if you have any questions.

EDIT In response to your additional comment (I must have overlooked this in my initial answer), I've added some more code so the hover text is centred. To do this, I added to #icon_search some new CSS, so the HTML looks like this:

<span id="icon_search" style="display:block; position:relative; top:50%; margin-top:-8px;">
    <I class ="fa fa-search-plus" > </I>Hover
</span>

Using this CSS, the hover text will remain in the center of the container, regardless of the container's size. Note that for multi-line content, you'll need to increase the negative margin-top accordingly.

Now, for the fading in/out, you can't actually use CSS transitions to animate the display property, so we need a different approach. I felt it would be easier (and a little more robust across browsers) to just move that fading fully to the jQuery. So I removed transition:0.3s from your inline styles, and changed the JavaScript code to:

$(document).ready(function () {
    $(".posts").mouseenter(function () {
        $(this).find('a.search_icon_hover').fadeIn(300);
    }).mouseleave(function () {
        $(this).find('a.search_icon_hover').fadeOut(300);
    });
});

Here's a new JSFiddle to show you what this achieves. Let me know if you were looking to do anything else.

Upvotes: 2

Related Questions