Jquery Select Current Element

Question

I have at least two "news boxes" in my website, using code like:

<a class="newsbox" href="#"><span>TITLE</span><div>read more</div></a>
<a class="newsbox" href="#"><span>TITLE</span><div>read more</div></a>

With this code, I hide the "read more" in this anchor tag:

jQuery("a.newsbox div").hide();

which works fine.

Now I want to make the "read more" visible only on the currently hovered news box.

I tried using this code:

jQuery("a.newsbox").hover(function() {
    jQuery(this).hover(function() {
        jQuery("div").fadeIn();
    });
});

but that is for all anchor tags with the class "newsbox". How can I select the current element and just show the "read more" for the current hovered element?

Answer 1

Try something like this:

$('a.newsbox').hover( function(){
  $(this).find('div').fadeToggle();
});

By using fadeToggle , "read more" will also hide itself on mouseout.

Answer 2

jQuery("a.newsbox").hover(function() {
   jQuery(this).find('div').fadeIn();
});

Answer 3

jQuery('div') is selecting all div elements on the page. You need to give it context...

jQuery("a.newsbox").hover(function() {
  jQuery("div", this).fadeIn();
});

See http://api.jquery.com/jQuery/

Answer 4

Try this code:

jQuery('a.newsbox').hover(function(){

   jQuery(this).children('div').fadeIn();

});