Fade text over image

Question

It seems that two things do not work with this code .

• I want to be able to hover over a large DIV to display a smaller size.

In its current form, it only works if you hover over the smaller DIV. 2. The smaller DIV does not disappear when I stop hanging.

<div class="one"> <div class="two"></div> </div> <div class="one"> <div class="two"></div> </div> 

 .one { position: relative; width: 100px; height: 100px; margin: 10px; background-color: #CCC; } .two { position: relative; top: 20px; left: 20px; height: 40px; width: 40px; background: #333; } 

 /* Fade-in text over images */ $(function(){ $(".two").css("opacity",0).fadeTo(0, 0); $(".two").mouseover(function () { $(this).fadeTo(200, 1); }); $("two").mouseout(function () { $(this).fadeTo(200, 0); }); }); 

Answer 1

This is because you select smaller div tags.

 $(function() { $(".two").hide(); $(".one").hover(function() { $('.two', this).fadeIn(200); }, function() { $('.two', this).fadeOut(200); }); }); 

Fiddle

• hide ()
• hover ()
• fadeIn ()
• fadeOut ()

Answer 2

You should target the larger div, .one , and then change the smaller div, .two in the context of this when you hover .one . When you disappear from visible in invisble, you can in most cases use fadeIn / Out and just set the display:none element in CSS.

 $(function(){ $('.one').on({ mouseenter: function() { $(".two", this).fadeIn(200); }, mouseleave: function() { $(".two", this).fadeOut(200); } }); });​ 

Fiddle

Answer 3

jsFiddle demo

 $(".one").on('mouseenter mouseleave',function ( e ) { var fade = e.type=='mouseenter'? $('.two', this).stop().fadeTo(200, 1): $('.two', this).stop().fadeTo(200, 0); });