在列表项上显示隐藏的div

Question

html:

I have a ul list with each li counstructed like this:

   <li class="A">list-item
     <div>1</div>
     <div class="B">2
        <div class="C">3</div>
     </div>

   </li>

where div C has css property display:none; I wrote this js:

   $(".A").hover(function () {
   $(".C").toggle();
   });

that shows hidden divs on li hover, but I would like js working only on active li item. So when i hover li item it shows only that list item hidden div.

any suggestions? I am new with js, so any help would be appreciated, thnx!

Answer 1

Try something like this, it will find class C within this (which will be the element being hovered)

$(".A").hover(function() {
    $(this).find(".C").toggle();
});

Answer 2

Use context to narrow the lookup to the desired element's children.

$(".A").hover(function () {
   $(".C", this).toggle();
});

Answer 3

Using the hover() , the correct format of hover function is:

$(".A").hover(
  function () {
    // A function to execute when the mouse pointer enters the element.
    $(this).find(".C").show();
  },
  function () {
    // A function to execute when the mouse pointer leaves the element.
    $(this).find(".C").hide();
  }
);