Adding the (this) keyword to single out an element

Question

I have a little jquery that shows some hidden content when element is hovered. Currently it showing each el that is matched but I'd like the behavior to only effect the element that is being hovered. I think I need to add the keyword this in some way to let the dom know it should only show the element that is being hovered.

 <li class="col-md-12">
  <div class="col-md-2">
    <a class="cbp-vm-image" href="#">
        <img src="assets/images/stash/11.png">
    </a>
</div>

<div class="col-md-10">
    <h3 class="cbp-vm-title">Lorem ipsum dolor sit amet</h3>
    <h5>by <b> Carrie_Strohl </b> - 3 weeks ago - 30,000 views</h5>

    <div class="cbp-vm-details">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
    </div>
</div>

$( ".cbp-vm-image" ).hover(function() {
    var n = $(".cbp-vm-view-grid .col-md-10");
    n.fadeToggle( 500 );
});

`$(this)` refers the the currently hovered `.cbp-vm-image` but it looks like you are fadeToggling a different item. Show some html so we can see the relationship between the items — Huangism, Jun 16 '14 at 17:30
You will need to show us the relevant portion of your HTML so we can see how `.cbp-vm-image` and `.cbp-vm-view-grid .col-md-10` are related to know how to advise you more specifically on the code to use. — jfriend00, Jun 16 '14 at 17:31

score 0 · Answer 1 · answered Jun 16 '14 at 17:31

If the element you wish to show is a child of the element that is being hovered, you should be able to use the jquery .find() method to accomplish this:

$( ".cbp-vm-image" ).hover(function() {
$(this).find(".cbp-vm-view-grid .col-md-10").fadeToggle( 500 );

});

Robusto · Answer 2 · 2014-06-16T19:20:24.817

0

You can use the event argument in your function to find the element that is being hovered over.

$( ".cbp-vm-image" ).hover(function(event) {
    var $hoveredElement = $(event.target);
    $hoveredElement.fadeToggle( 500 );
});

Alternatively, this will give you the same thing:

$( ".cbp-vm-image" ).hover(function() {
    var $hoveredElement = $(this);
    $hoveredElement.fadeToggle( 500 );
});

edited Jun 16 '14 at 19:20

answered Jun 16 '14 at 17:41

Robusto

31,447
8
56
77

This doesn't isolate the element that is hovered. Still having the initial behavior, all elements are being fadeToggled. – ndesign11 Jun 16 '14 at 18:00
@ndesign11: I edited to fade the hovered element instead of the whole array of them. – Robusto Jun 16 '14 at 19:21

score 0 · Accepted Answer · answered Jun 16 '14 at 18:01

Just a slightly different approach using the html "data" attribute.

FIDDLE

JS

$( ".myhover" ).hover(
    function(){
               var mytext = $(this).data("text");
               $('.putmehere').html( mytext );
               },
    function(){
               $('.putmehere').html('');
               }
);

Adding the (this) keyword to single out an element

3 Answers3