CODEWITHSUNDEEP
jqueryhtml
Edward
Edward

Reputation: 3081

Jquery confusion with $this

Is there a way I can show only the button to the box I'm hovering over without using the addclass() property and toggling the visibility. Is there a way to do something like $(this).('.list_remove').fadeIn("200"); what is the correct way to go about this?

http://jsfiddle.net/HjFPR/7/

Jquery

 (function(){

       $('.list_remove').hide();

      $(".boxes").hover(
      function () {
        $('.list_remove').fadeIn("200");
      },
      function () {
         $('.list_remove').fadeOut("200");
      }
    );

    })();​

HTML

<div class="boxes"> 
<input type="button" class="list_remove" value="remove"> </div>
<div class="boxes"> 
    <input type="button" class="list_remove" value="remove">
    </div>​

Upvotes: 2

Views: 64

Answers (2)

Sidharth Mudgal
Sidharth Mudgal

Reputation: 4264

You can do that by specifying a context for jQuery to find the list-remove button in. 

$('.list_remove', this).fadeIn("200");
$('.list_remove', this).fadeOut("200");

Updated Fiddle

Upvotes: 2

Musa
Musa

Reputation: 97672

You can specify a context to search so $('.list_remove', this).fadeIn("200"); will fade in .list_remove descendents of the .boxes

$(".boxes").hover(
      function () {
        $('.list_remove', this).fadeIn("200");
      },
      function () {
         $('.list_remove', this).fadeOut("200");
      }
);

Upvotes: 3

Related Questions