javascript - Jquery Hover Failing on Child Div Entry -

javascript - Jquery Hover Failing on Child Div Entry -

i have div when hover swaps image, , makes div visible. seems fine, when come in kid div hover fails , swaps image back. thought hover should go on through children still hovering on parent element. using mouseenter , mouseleave on text portion, tried on image swap, , still fain on entering workerdata div.

here code.

html

<div id="workersare"> <div class="workers" id="anita"> <div class="workerimage"> <img src="http://s28.postimg.org/biajzhy1p/anita.jpg" data-alt-src="http://s14.postimg.org/3v8gu1e0h/anita_over.jpg" class="workercover"> </div> <div class="workerdata"> <h1>anita fine art maker</h1> <h2>arty, art, art</h2> </div> </div> </div>

css

#workerare{ width:100%; } .viveworkers{ width:100%; float:left; position:relative; } .workerimage{ position:relative; } .workercover{ width:100%; } .workerdata{ position:absolute; top:0; width:100%; text-align: center; display:none; }

jquery

var sourceswap = function () { var $this = $(this); var newsource = $this.data('alt-src'); $this.data('alt-src', $this.attr('src')); $this.attr('src', newsource); } $(function() { $('img[data-alt-src]').each(function() { new image().src = $(this).data('alt-src'); }).hover(sourceswap, sourceswap); }); $('.workers').mouseenter(function(){ $(this).find('.workerdata').show(); }); $('.workers').mouseleave(function(){ $(this).find('.workerdata').hide(); });

here link fiddle. input or force in right direction appreciated.

your image , text siblings. when hover on text, hover of image ends.

use .workers element hovering (as did showing , hiding text) so:

var sourceswap = function () { var $this = $(this); var newsource = $this.data('alt-src'); $this.data('alt-src', $this.attr('src')); $this.attr('src', newsource); } $(function() { $('img[data-alt-src]').each(function() { new image().src = $(this).data('alt-src'); }); }); $('.workers') .mouseenter(function(){ sourceswap.call($(this).find('img')); $(this).find('.workerdata').show(); }) .mouseleave(function(){ sourceswap.call($(this).find('img')); $(this).find('.workerdata').hide(); });

demo

or replace lastly part this:

$('.workers') .hover(function(){ sourceswap.call($(this).find('img')); $(this).find('.workerdata').toggle(); });

demo

javascript jquery html css