CODEWITHSUNDEEP
jquery
Lex
Lex

Reputation: 57

how to let appear only one containing child element using show()

I have a table, which obviously has multiple <td> elements. Every <td> contains a <div class='surprise' style=' display: none;'>, which I want to appear when hovering over the <td>. Using the code below I was able to show all my <div>'s, but I want only that <div> which is inside the <td> I am hovering over. How can I do that?

  $(document).ready(function(){
    $('td').hover(function () {
        $('.surprise').show();
    },function () {
        $('.surprise').hide();
    });
  });

I tried following, without success:

$(document).ready(function(){
  $('td').hover(function() {
    $('.surprise').one(function() {
      $(this).show();
    });
  });
  },function() {
    $('.surprise').one(function() {
      $(this).hide();
    });
  });
});

Upvotes: 1

Views: 27

Answers (2)

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

I think this would be better handled using CSS.

td .surprise{
   display:none;
}

td:hover .surprise{
   display:block;
}

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

If <td> has the child element, use $(this).find(), so that it affects only the current <td>:

  $(document).ready(function(){
    $('td').hover(function () {
        $(this).find('.surprise').show();
    },function () {
        $(this).find('.surprise').hide();
    });
  });

Upvotes: 1

Related Questions