CODEWITHSUNDEEP
jquerythiseach
Olegious
Olegious

Reputation: 73

Basic jQuery- can't get hover( ) to target a specific element

I have a series of items:

https://i.sstatic.net/z5Ldg.jpg

Each item is structured like this:

        <div class="span3 item">
          <img class="itemImage" src="assets/img/bure.jpg">
          <div class="itemDescription">
            <p><span class="itemDescLabel">Title:</span> <script>document.write(title);</script></p>
            <p><span class="itemDescLabel">Price:</span> <script>document.write(price);</script></p>
            <p><span class="itemDescLabel">Source:</span> <script>document.write(source);</script></p>
          </div><!-- /itemDescription-->
        </div> <!-- /item-->

The idea is that when I hover over one, its description is supposed to be displayed.

What currently happens is that when I hover over one, the descriptions for all items are displayed.

This is happening because I'm applying hover like this: 

    $(document).ready(function() {
        $('.item').hover(
          function() {
          $('.itemDescription').show();
            }, 
          function() {
          $('.itemDescription').hide();
        });//end hover    
      });//end ready

I have tried doing this: 

  $(document).ready(function() {
    $('.item').hover(
      function() {
      $(this).next('.itemDescription').show();
        }, 
        function() {
      $(this).next('.itemDescription').hide();
    });//end hover 
  });//end ready

and this:

  $(document).ready(function() {
    $('.item').each(function() {
      $(this).hover(
        function() {
      $(this).next('.itemDescription').show();
        }, 
        function() {
      $(this).next('.itemDescription').hide();
      });//end hover
    });//end each
  });//end ready

Neither method has worked.

What am I doing wrong? I know I can give each item a different ID, but there should be an easier way of doing this...

Thanks.

Upvotes: 1

Views: 598

Answers (1)

Ram
Ram

Reputation: 144709

You can use $(selector, context) or find method.

$(document).ready(function() {
    $('.item').hover(function() {
        $('.itemDescription', this).show();
        // $(this).find('.itemDescription').show();
    }, function() {
        $('.itemDescription', this).hide();
    });
});

next selects the next sibling element, in your markup itemDescription is descendant of the item element, not sibling.

You can also use toggle method.

$('.item').hover(function() {
    $('.itemDescription', this).toggle();
});

http://jsfiddle.net/pvFN9/

Upvotes: 2

Related Questions