CODEWITHSUNDEEP
javascriptjquery
meh.meh
meh.meh

Reputation: 15

show hidden div on list items

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!

Upvotes: 1

Views: 753

Answers (3)

palaѕн
palaѕн

Reputation: 73906

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();
  }
);

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

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

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

Upvotes: 2

Smern
Smern

Reputation: 19066

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();
});

Upvotes: 3

Related Questions