hover overlayed text on an image bug

Question

I have an overlayng text and navigation arrows on an image, they appear when a mouseover event is fired and hide when the mouse leaves the image.

The bug is that the overlay text is not a part of the image, so when i mouse over it, it starts flashing (because when the text hides, the mouse is positioned on the image, and that fires the mouseover event and the text shows up again)

This is my current JavaScript logic:

$('#container img').mouseover(function(){
    $(this).siblings('.discr').show();
    $(this).mouseout(function(){
        $(this).siblings('.discr').hide();
    })
})

For better understanding this is a DEMO and here is what i expect: the overlay text does not flash when the mouse is over it, it acts like when the mouse is over the image only.

Answer 1

You can try something like this:

JavaScript version

$('#container').mouseover(function () {
    var $controls = $(this).find('.discr');
    $controls.show();
    $(this).mouseout(function () {
        $controls.hide();
    })
})

Example http://jsfiddle.net/b6hjm3t1/

Pure CSS version without JavaScript

You can have the same results just with CSS without the using JavaScript just by adding to the CSS:

#container:hover .discr {
  display:block;
}

Example: http://jsfiddle.net/t6hf0fqg/

Answer 2

I think that this does what you're looking for. I've modified the code a little bit:

http://jsfiddle.net/jfkk78cn/1/

$( "#container" )
  .mouseover(function() {
    $(this).find('.discr').show();
  })
  .mouseout(function() {
    $(this).find('.discr').hide();
  });

Answer 3

Here is a CSS only solution for the same effect.

The important part is the you can do #container:hover .discr which will target the .discr elements when the #container is hovered.

 img { width:200px; height:200px; display:block; } #container { float:left; position:relative; border:2px solid green; } .discr { position:absolute; color:red; background:rgba(0, 0, 0, 0.2); bottom:0px; width:100%; text-align:center; display:none; } /*ADDED THIS RULE*/ #container:hover .discr{ display:block; } .next { left:185px; } .next, .prev { bottom:50%; width:15px; border-radius:9px; } 

 <div id='container'> <img src='http://goo.gl/Rwf5SG' /> <div class='discr prev'>&lt;</div> <div class='discr next'>&gt;</div> <div class='discr'>lorem ipsum</div> </div>