CODEWITHSUNDEEP
jqueryhtmlhover
Marek123
Marek123

Reputation: 1211

Jquery Select Current Element

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?

Upvotes: 1

Views: 4848

Answers (4)

jimy
jimy

Reputation: 4908

Try this code:

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

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

});

Upvotes: 0

scurker
scurker

Reputation: 4753

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/

Upvotes: 1

Headshota
Headshota

Reputation: 21449

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

Upvotes: 1

Ken Redler
Ken Redler

Reputation: 23943

Try something like this:

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

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

Upvotes: 6

Related Questions