Question

This really should not be this complicated, but can’t figure it out.

Have several tabs vertically on the left along the body content section.

On page load, the “leftKanji” css = display:none. Want when mouse enters the link or “leftTab” class, then “leftKanji” css = disply:block

Currently either all the “leftKanji” shows or hides, not the one the mouse is hover over with. Bonus would be if I can add a “slow” or animate to it.

HTML:

<script type="text/javascript" >
$(document).ready(function(){
    $('.leftTab').hover( function(){
      $(".leftKanji").css('display', 'block');
   },
   function(){
      $(".leftKanji").css('display', 'none');
   });
});
</script>
<div class="mainTabSection">
   <a href="#" class="leftTab">
     <div class="mainTab"><img src="../"  /></div>
     <div class="leftKanji"><img src="../"  /></div>
   </a>
</div>

<div class="mainTabSection">
   <a href="#" class="leftTab">
     <div class="mainTab"><img src="../"  /></div>
     <div class="leftKanji"><img src="../"  /></div>
   </a>
</div>

Answer 1

When you say $(‘.leftKanji’), you refer to all elements with that class. The code below will get the element that is a child of the .leftTab element. You can change .children() to be any one of the traversing selectors in the jQuery api, but I used that one as an example. The important thing though is to use $(this), as it corresponds with the element that was hovered.

$(document).ready(function(){
    $('.leftTab').hover( function(){
      $(this).children(.leftKanji').css('display', 'block');
   },
   function(){
      $(this).children(.leftKanji').css('display', 'none');
   });
});

You could probably also do something like the following:

$('.leftKanji', $(this)).css('display', 'block')

or

$('.leftKanji', this).css('display', 'block')

Though I can’t remember the exact syntax at this moment.

http://api.jquery.com/category/traversing/