1

I have inserted a div using inserAfter() to an image like this:

$('<div class="q"></div>').insertAfter('img');

I have set the div to display:none and would like to show it with jquery so I did:

$('img').on('hover', function(e){
      $(this).each(function (i) {
    $(this).closest('.q').show();
  });
        });

It doesn't work. The div is still hidden when I hover the img. I cant see anything wrong with my code. What can I try?

JsFiddle

3 Answers 3

2

I feel that it should be noted that you can do the same thing using just CSS, and the selectors involved have great browser compatibility anyway.

div.q {
    display:none;
}

img:hover + div.q {
    display:block;
}

This should do the trick, actually.

2
  • Do you have any idea why it 'flashes' on and off when you move the mouse a bit around? Is it because of the transition made between div and img?
    – Youss
    Mar 25, 2013 at 14:02
  • 1
    I have no sure idea why without a clear view of your markup's rendering, but I'd think that your <div> may be moving stuff in your layout around when it pops in and out of "existence". There could be a number of different reasons though. Mar 25, 2013 at 14:10
1

closest selects the closest parent of the selected element, you should use next method instead. Also using hover event with on method is deprecated.

Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

$('img').on({
    mouseenter: function() {
        $(this).next('.q').show();
    },
    mouseleave: function() {
        $(this).next('.q').hide();
    }
});

http://jsfiddle.net/yyAma/

1

LIVE DEMO

HTML:

<div class="addQ">
   <img  src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>

<div class="addQ">
   <img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>

CSS:

.addQ{
    position:relative;
    float:left;
    margin:10px;
}

.addQ img {
   position:relative;
    vertical-align:middle;
    width:300px;
}


.q {
    position:absolute;
    top:0;
    box-shadow:inset 0px 0px 85px red;
    -webkit-box-shadow:inset 0px 0px 85px red;
    -moz-box-shadow:inset 0px 0px 85px red;
    z-index: 3;
    display:none;
}

jQ:

$(function(){

    var addQimg = $('.addQ img');
    var wi = addQimg.width();
    var he = addQimg.height();

    $('.addQ').each(function(){
        $(this).append("<div class='q' />");
        $(this).find('.q').width(wi).height(he);
    }).on('mouseenter mouseleave', function( e ){
        var opacity = e.type=='mouseenter' ? 1 : 0 ;
        $(this).stop().find('.q').fadeTo(700, opacity); 
    });

});
1
  • Thank you very much +1 (very impressive) But I like the answer provided by @Richard Neil Ilagan because Im screen scraping, so I dont want to mess to much with the specs of the image, ideally it should have no css to it at all accept from its original coding
    – Youss
    Mar 25, 2013 at 14:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.