CODEWITHSUNDEEP
jqueryhtmlcss
TheRealPapa
TheRealPapa

Reputation: 4539

Specific targeting with jQuery hover not working

I want to grab using jQuery the .hover() event for #sidebar-wrapper only when #page-wrapper has a class of toggled-2. 

<div id="page-wrapper" class="toggled-2">

  <!-- Sidebar -->
  <div id="sidebar-wrapper">

    <ul class="sidebar-nav nav-pills nav-stacked" id="menu">
      <li id="organisation"><a href="/organisation"><span class="menu-icon-stack glyphicon glyphicon-pencil" aria-hidden="true"></span>Select Business</a></li>
      <li>....</li>
      <li class="active">
         <ul class="sidebar-nav nav-stacked sub-nav nav-list">
             <li>....</li>
             <li class="sub-active">Active menu item</li>
             <li>....</li>
         </ul>
      </li>
    </ul>

   </div>
 </div>

My latest jQuery attempt is this (no errors, but does not execute):

$("#page-wrapper.toggled-2 #sidebar-wrapper").hover(
    function() {
        alert("hover active!");
    },
    function() {
        alert("hover off!");
    }
);

This code executes the alerts, but it is not specific in its targeting so it also triggers the alerts when the toggled-2 class has not been applied to #page-wrapper:

$("#sidebar-wrapper").hover(
    function() {
        alert("hover active!");
    },
    function() {
        alert("hover off!");
    }
);

Thanks for any help

Upvotes: 0

Views: 49

Answers (2)

fridge_light
fridge_light

Reputation: 436

Bind your event to #sidebar-wrapper but conditionally check the parent (#page-wrapper) to see whether it has the required class or not.

$("#sidebar-wrapper").hover(function() {
    if($(this).parent().hasClass("toggled-2")) {
        alert("Hover active!");
    }
});

Upvotes: 1

Twisty
Twisty

Reputation: 30893

I would try:

$("div#page-wrapper.toggled-2 > #sidebar-wrapper").hover(
    function() {
        console.log("hover active!");
    },
    function() {
        console.log("hover off!");
    }
);

Or

$("div#page-wrapper.toggled-2").find("#sidebar-wrapper").hover(
    function() {
        console.log("hover active!");
    },
    function() {
        console.log("hover off!");
    }
);

This should be more specific. Your second bit of code would execute anytime that div is hovered over.

Upvotes: 0

Related Questions