Why is the hover background-color not working when I click any tab?

Question

I'm practicing jQuery by making a simple navigation. There are 4 main tabs. Each has its own hover color, i.e., little dark from the main navigation bar. I have used CSS for this thing. But I want to change the tab color when I click it, and on clicking again, I want it to revert. For this, I've used toggleClass() function. But things are not working and even hover stops working after placing this function. My queries are:

Why is this happening, the hover is being disabled? How do I use toggleClass() correctly? Is there any way to perform these actions (displaying hidden menus) by hover event of jQuery, instead of click? [I've tried this, the sub menus are displayed but they disappear as soon as mouse moves out. How do I fix it?] Here's the snippet:

body{
 margin: 0px;
 }
#nav{
 height: 40px;
 background-color: #009999;
 }
 #navbar{
 height: inherit;
 width: 590px;
 margin: auto;
 }
#slide{
 height: 400px;
 background-color: #999999;
 }
#content{
 height: 100px;
 background-color: #666666;
 }
ul li{
 float: left;
 list-style: none;
 padding: 5px 25px 5px 25px;
 line-height: 30px;
 background-color: #009999;
 cursor: pointer;
 text-decoration: none;
 color: white;
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;
 border-left: 1px solid #006666;
 transition-property: background-color;
 transition-duration: 0.5s;
 }
.c1{
border-right: 1px solid #006666;
}
ul li:hover{
 background-color: #006666;
 }
ul{
 margin-top: -16px;
 }
#dropdown{
 position: absolute;
 width: 92.5%;
 //display: none;
 padding:10px 0 10px 100px;
 color: white;
 font-family: Arial, Helvetica, sans-serif;
 background-color:#00CCCC;
 display: none;
 }
.c7{
 background-color: #006666;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
$(document).ready(function(){
 $("li").eq(0).click( function(){
  $(".c2").fadeToggle(300);
  $("li").eq(0).toggleClass("c7");
  $(".dropcontainer #dropdown").eq(0).siblings().fadeOut("fast");
  $("li").eq(0).siblings().css("background-color", "#009999");
  });
 $("li").eq(1).click( function(){
  $(".c3").fadeToggle(300);
  $("li").eq(1).toggleClass("c7");
  $(".dropcontainer #dropdown").eq(1).siblings().fadeOut("fast");
  $("li").eq(1).siblings().css("background-color", "#009999");
  });
 $("li").eq(2).click( function(){
  $(".c4").fadeToggle(300);
  $("li").eq(2).toggleClass("c7");
  $(".dropcontainer #dropdown").eq(2).siblings().fadeOut("fast");
  $("li").eq(2).siblings().css("background-color", "#009999");
  });
 $("li").last().click(function(){
  $(".c5").fadeToggle(300);
  $("li").eq(3).toggleClass("c7");
  $(".dropcontainer #dropdown").eq(3).siblings().fadeOut("fast");
  $("li").eq(3).siblings().css("background-color", "#009999");
  });
});
</script>
</head>
<body>
<div id="nav">
  <div id="navbar">
    <ul>
      <li>Tech</li>
      <li>National</li>
      <li>Sports</li>
      <li class="c1">Contact</li>
    </ul>
  </div>
</div>
<div class="dropcontainer">
<div id="dropdown" class="c2">
<p>Tech</p>
<p>Tech2</p>
<p>Tech3</p>
</div>
<div id="dropdown" class="c3">
<p>National</p>
<p>National2</p>
<p>National3</p>
</div>
<div id="dropdown" class="c4">
<p>Sports</p>
<p>Sports2</p>
<p>Sports3</p>
</div>
<div id="dropdown" class="c5">
<p>Contact</p>
<p>Contact2</p>
<p>Contact3</p>
</div>
</div>
<div id="slide"></div>
<div id="content"></div>
</body>
</html>

`id`s have to be unique in HTML - use a `class` for "dropdown" — Owlvark, Jan 29 '16 at 15:51
Sorry, I didn't get. You mean replacing all 4 IDs by classes named dropdown? — Vikas Kumar, Jan 29 '16 at 15:58
Ok. I'll try it in next few minutes. Could you please answer other query, the last one? — Vikas Kumar, Jan 29 '16 at 16:16
No sir, it has complicated the problem even more. I replaced all 4 ids with class, and it has stopped displaying anything. — Vikas Kumar, Jan 29 '16 at 16:20

score 0 · Accepted Answer · answered Jan 29 '16 at 16:38

I think that´s what you want. Try it plz !

I´ve commented what I though was not necessary.

EXPLANATION: When you apply css rules programmatically, like .css("background-color", "#009999") that´s more restricted than the rules you have in your Style definition. That is called Specificity. There you have a link -> CSS Specificity

After that, the :hover will work as desired.

Also, I´ve removed the container fadeOut, and added a little more treatment with the id´s (and removed the last() and used a real index, and it seems to work now.

Why is this happening, the hover is being disabled? <-- Yes specificity from .css and reffered to a particular element, is bigger than the style definition one.

How do I use toggleClass() correctly? <- Toggle class will add it if you don´t have it and remove it if you have it.

Is there any way to perform these actions (displaying hidden menus) by hover event of jQuery, instead of click? [I've tried this, the sub menus are displayed but they disappear as soon as mouse moves out. How do I fix it?] <--- You can also use mouseover() or hover() methods. They work similar to click, but you will need also a mouseout() in the menu below the bar, to hide it when pointing around.... and it will be little more work :)

Here's the snippet:

body {
  margin: 0px;
}
#nav {
  height: 40px;
  background-color: #009999;
}
#navbar {
  height: inherit;
  width: 590px;
  margin: auto;
}
#slide {
  height: 400px;
  background-color: #999999;
}
#content {
  height: 100px;
  background-color: #666666;
}
ul li {
  float: left;
  list-style: none;
  padding: 5px 25px 5px 25px;
  line-height: 30px;
  background-color: #009999;
  cursor: pointer;
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  border-left: 1px solid #006666;
  transition-property: background-color;
  transition-duration: 0.5s;
}
.c1 {
  border-right: 1px solid #006666;
}
ul li:hover {
  background-color: #006666;
}
ul {
  margin-top: -16px;
}
#dropdown {
  position: absolute;
  width: 92.5%;
  //display: none;
  padding: 10px 0 10px 100px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #00CCCC;
  display: none;
}
.c7 {
  background-color: #006666;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <link rel="stylesheet" type="text/css" href="css.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Untitled Document</title>
  <script>
    $(document).ready(function() {
      $("li").eq(0).click(function() {
        $(".c2").fadeToggle(300);
        $(".c3").fadeOut(300);
        $(".c4").fadeOut(300);
        $(".c5").fadeOut(300);
        $("li").eq(0).toggleClass("c7");
        $("li").eq(1).removeClass("c7");
        $("li").eq(2).removeClass("c7");
        $("li").eq(3).removeClass("c7");

        //$(".dropcontainer #dropdown").eq(0).fadeOut("fast");
        //$("li").eq(0).css("background-color", "#009999");
      });
      $("li").eq(1).click(function() {
        $(".c3").fadeToggle(300);
        $(".c2").fadeOut(300);
        $(".c4").fadeOut(300);
        $(".c5").fadeOut(300);
        $("li").eq(1).toggleClass("c7");
        $("li").eq(0).removeClass("c7");
        $("li").eq(2).removeClass("c7");
        $("li").eq(3).removeClass("c7");

        //$(".dropcontainer #dropdown").eq(1).fadeOut("fast");
        //$("li").eq(1).css("background-color", "#009999");
      });
      $("li").eq(2).click(function() {
        $(".c4").fadeToggle(300);
        $(".c2").fadeOut(300);
        $(".c3").fadeOut(300);
        $(".c5").fadeOut(300);
        $("li").eq(2).toggleClass("c7");
        $("li").eq(0).removeClass("c7");
        $("li").eq(1).removeClass("c7");
        $("li").eq(3).removeClass("c7");
        //$(".dropcontainer #dropdown").eq(2).fadeOut("fast");
        //$("li").eq(2).css("background-color", "#009999");
      });
      $("li").eq(3).click(function() {
        $(".c5").fadeToggle(300);
        $(".c2").fadeOut(300);
        $(".c3").fadeOut(300);
        $(".c4").fadeOut(300);
        $("li").eq(3).toggleClass("c7");
        $("li").eq(0).removeClass("c7");
        $("li").eq(1).removeClass("c7");
        $("li").eq(2).removeClass("c7");

        //$(".dropcontainer #dropdown").eq(3).fadeOut("fast");
        //$("li").eq(3).css("background-color", "#009999");
      });
    });
  </script>
</head>

<body>
  <div id="nav">
    <div id="navbar">
      <ul>
        <li>Tech</li>
        <li>National</li>
        <li>Sports</li>
        <li class="c1">Contact</li>
      </ul>
    </div>
  </div>
  <div class="dropcontainer">
    <div id="dropdown" class="c2">
      <p>Tech</p>
      <p>Tech2</p>
      <p>Tech3</p>
    </div>
    <div id="dropdown" class="c3">
      <p>National</p>
      <p>National2</p>
      <p>National3</p>
    </div>
    <div id="dropdown" class="c4">
      <p>Sports</p>
      <p>Sports2</p>
      <p>Sports3</p>
    </div>
    <div id="dropdown" class="c5">
      <p>Contact</p>
      <p>Contact2</p>
      <p>Contact3</p>
    </div>
  </div>
  <div id="slide"></div>
  <div id="content"></div>
</body>

</html>

Thank you sir, your answer helped me. But there's one more problem, regarding my 3rd query. I've changed the click to hover and fadeToggle to fadeIn. Now, when the mouse enters the dropdown div (say .c2), it doesn't disappear (which I want) and as the mouse moves out (mouseout), it disappears (fadeOut). But there's a problem, maybe because this div (.c2) containers more elements like
. So when the mouse enters any of them, maybe the browser assumes that mouse cursor is out of div, so it makes the div disappear, even when the cursor is ultimately inside the div. How do I solve this? — Vikas Kumar, Jan 30 '16 at 05:14
You are right, the mouse events, not always work as we desire :P read this page carefully. They explain how they work. http://www.quirksmode.org/js/events_mouse.html — Alejandro Teixeira Muñoz, Jan 30 '16 at 11:22
nice!! sometimes writing a little more lines instead of using "things-we-think-that-are-quick-methods" is just an easy solution :P happy to see u solved!!! regards!! — Alejandro Teixeira Muñoz, Jan 30 '16 at 12:09
Could you answer this: http://stackoverflow.com/questions/35101642/why-is-overflowhidden-not-working-on-c2-div ? — Vikas Kumar, Jan 30 '16 at 12:13

Why is the hover background-color not working when I click any tab?

1 Answers1