用两个div淡出淡出不起作用

Question

I have the following code http://jsfiddle.net/largan/2n2Lf/25/ The idea is the div called soc_text to fade and fade out when hover on the soc_button div.

I have this script, but it doesn't seems to work.

$(document).ready(function()
{    
    $("div.soc_button").hover(
      function () {
        $("div.soc_text").fadeIn('slow');
      }, 
      function () {
        $("div.soc_text").fadeOut('slow');
      }
    );
});

Any ideas? Thanks

Answer 1

$(document).on("mouseover", "div.soc_button", function(){
    $(this).find("div.soc_text").fadeToggle("slow");
});

Answer 2

Here's the answer:

$(document).ready(function () {    
  $("div.soc_button img").hover(
    function () {
      console.log();
      $(this).parent().find('div.soc_text').fadeIn('slow');
    }, 
    function () {
      $(this).parent().find('div.soc_text').fadeOut('slow');
    }
  );
});

I guess the code is self explanatory, Regards

Answer 3

This applies the method to all matches with all div tags with soc_text css class

 $("div.soc_text").fadeIn('slow');

Change this to

$(this).children('div.soc_text').fadeIn('slow');