White Maskers White Maskers - 3 months ago 12
HTML Question

The hover property lost when click on any of the menu item

In the code given below i tried to give a hover property background-color with a value blue. But it works initially before we select any of the menu item (apps ,layout,widjets,etc..),and then it's not working.how can i fix it?



function functionButton() {
document.getElementById("flip-up-menu").style.display = "block";
}
function buttonSec() {
document.getElementById("flip-up-menu").style.display = "none";
}
function displaySubMenu(e) {
var k = e;
if (k === 2) {
if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-caret-down"){
document.getElementById("sub-menu-one").style.display="none";
}
else{
document.getElementById("sub-menu-one").style.display = "block";
document.getElementById("flip-main-two").style.background = "rgba(105,193,132,1)";
document.getElementById("sub-menu-two").style.display = "none";
document.getElementById("flip-main-one").style.background = "none";
document.getElementById("flip-main-three").style.background = "none";
document.getElementById("flip-main-four").style.background = "none";
}
} else if (k === 3) {
if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-caret-down"){
document.getElementById("sub-menu-two").style.display="none";
}
else{
document.getElementById("sub-menu-two").style.display = "block";
document.getElementById("flip-main-three").style.background = "rgba(105,193,132,1)";
document.getElementById("sub-menu-one").style.display = "none";
document.getElementById("flip-main-one").style.background = "none";
document.getElementById("flip-main-two").style.background = "none";
document.getElementById("flip-main-four").style.background = "none";}
} else if (k === 1) {
document.getElementById("flip-main-one").style.background = "rgba(105,193,132,1)";
document.getElementById("sub-menu-one").style.display = "none";
document.getElementById("sub-menu-two").style.display = "none";
document.getElementById("flip-main-two").style.background = "none";
document.getElementById("flip-main-three").style.background = "none";
document.getElementById("flip-main-four").style.background = "none";
} else if (k === 4) {
document.getElementById("flip-main-four").style.background = "rgba(105,193,132,1)";
document.getElementById("sub-menu-one").style.display = "none";
document.getElementById("sub-menu-two").style.display = "none";
document.getElementById("flip-main-one").style.background = "none";
document.getElementById("flip-main-three").style.background = "none";
document.getElementById("flip-main-two").style.background = "none";
} else {
document.getElementById("sub-menu-one").style.display = "none";
document.getElementById("sub-menu-two").style.display = "none";
}
}
function rotateIcon(m) {
var key = m;
if ( key === 2)
{

if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-caret-down")
{

document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-caret-down";

}
else
{
document.getElementById("first-drop-down-icon").className="spinner-icon in fa fa-caret-down";
document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
}


}
else if(key === 3)
{
if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-caret-down")
{

document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-caret-down";
}
else
{
document.getElementById("second-drop-down-icon").className="spinner-icon in fa fa-caret-down";
document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
}
}
else{
document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-caret-down";
document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-caret-down";
}
}

.flip-container-main-menu-parent{
cursor: pointer;
margin-left: -1rem;
padding-left: 1rem;
margin-right: -1rem;
padding-bottom: .5rem;
}
.flip-menu-main-icon{
float:none;
margin-right:10px;
margin-left: 0;
position: relative;
top:0;
min-width: 1.5rem;
list-style-type: none;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
}
.fa.flip-menu-main-icon{
font-size: 13px;
width: 1em;
height: 1em;
line-height: 2.5rem;
font-style: normal;
font-weight: normal;
opacity:1;
}
.flip-menu-text{
text-align: left;
font-weight:500;
line-height: 1.125rem;
padding: .5625rem 0;
margin: 0;
outline: 0;
border: 0;
font-size: 14px;
}
.flip-sub-menu{
opacity: 0.75;
padding-top: .4375rem;
padding-bottom: .4375rem;
padding-right: 9.4rem;
padding-left: 4rem;
margin-left: -2rem;
text-align: left;
line-height: 1.125rem;
display:block;
background-color: rgba(24,33,118,1);
color: rgba(255,255,255,.87)!important;
width: 100%;
display: none;
}
ul.flip-sub-menu li a{
color: rgba(255,255,255,.87)!important;
line-height: 2rem;
}
#flip-up-container .flip-up-container-main-menu-parent:hover
{
background-color: #122112;
}
#flip-up-container ul:hover{
background-color: #122112;
}
.flip-container-sub-menu-one li a
{
color: white;
}
.flip-container-submenu-one li:hover{
background-color: #0f0f3e;
}
.flip-container-sub-menu-two li a
{
color: white;
}
.flip-container-sub-menu-two li:hover{
background-color: #0f0f3e;
}
.flip-menu-drop-down-icon{
float: right;
padding-right: 5%;
margin-top: 5%;
margin-left:-3rem;
}
.spinner-icon{
font-size:13px;
float: right;
margin-top: 5%;
margin-right: 7%;
transition: all 0.3s ease-in-out;
opacity:0.75;
}
.fa.spinner-icon{
font-size: 13px;
}
.spinner-icon.in{
transform: rotate(-180deg);
}
.spinner-icon.out{
transform:rotate(0deg);
}
.flip-container-main-menu-parent:hover {
background-color:rgba(24,33,118,1);
font-weight: 600;
}
.flip-sub-menu li:hover{
background-color: rgba(120,130,140,.13);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<ul class="flip-container-main-menu">
<li class="flip-container-main-menu-parent" id="flip-main-one" onclick="displaySubMenu(1);rotateIcon('first-drp-down-icon');"><i class="flip-menu-main-icon fa fa-glass "></i><span class="flip-menu-text">Dashboard</span></li>
<li class="flip-container-main-menu-parent" id="flip-main-two" onclick="displaySubMenu(2);rotateIcon(2);"><i class="flip-menu-main-icon fa fa-th"></i><span class="flip-menu-text">Apps</span> <i id="first-drop-down-icon" class="spinner-icon fa fa-caret-down"></i> </li>
<ul id="sub-menu-one" class="flip-sub-menu">
<li> <a href="#">Inbox</a> </li>
<li> <a href="#">Condact</a> </li>
<li> <a href="#">Calendar</a> </li>
</ul>
<li class="flip-container-main-menu-parent" id="flip-main-three" onclick="displaySubMenu(3);rotateIcon(3);"><i class="flip-menu-main-icon fa fa-th-large"></i><span class="flip-menu-text">Layouts</span><i id="second-drop-down-icon" class="spinner-icon fa fa-caret-down"></i> </li>
<ul id="sub-menu-two" class="flip-sub-menu">
<li> <a href="#">Header</a> </li>
<li> <a href="#">Aside</a> </li>
<li> <a href="#">Footer</a> </li>
</ul>
<li class="flip-container-main-menu-parent" id="flip-main-four"onclick="displaySubMenu(4);rotateIcon(4);"><i class="flip-menu-main-icon fa fa-align-justify"></i><span class="flip-menu-text">Widjets</span></li>
</ul>




Answer
  1. Do not set "none" as background, because this will be a property which is not affected by a hover effect.
  2. Just delete teh background color with an empty string.
  3. Tidy up your code and make it more clean ;) You can iterate through some items and do it DRY-style (do not repeat yourself).

function functionButton() {                    
    document.getElementById("flip-up-menu").style.display = "block";
}
function buttonSec() {
    document.getElementById("flip-up-menu").style.display = "none"; 
}
function displaySubMenu(e) {
    var k = e;
    if (k === 2) {
        if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-caret-down"){
            document.getElementById("sub-menu-one").style.display="none";
        }
        else{
                 document.getElementById("sub-menu-one").style.display = "block"; 
        document.getElementById("flip-main-two").style.background = "rgba(105,193,132,1)";
        document.getElementById("sub-menu-two").style.display = "none";
        document.getElementById("flip-main-one").style.background = "";
        document.getElementById("flip-main-three").style.background = "";
        document.getElementById("flip-main-four").style.background = "";
        }
    } else if (k === 3) {
         if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-caret-down"){
              document.getElementById("sub-menu-two").style.display="none";
         }
        else{
        document.getElementById("sub-menu-two").style.display = "block";
        document.getElementById("flip-main-three").style.background = "rgba(105,193,132,1)";
        document.getElementById("sub-menu-one").style.display = "none";            
        document.getElementById("flip-main-one").style.background = "";
        document.getElementById("flip-main-two").style.background = "";
        document.getElementById("flip-main-four").style.background = "";}
    } else if (k === 1) {
        document.getElementById("flip-main-one").style.background = "rgba(105,193,132,1)"; 
        document.getElementById("sub-menu-one").style.display = "none";
        document.getElementById("sub-menu-two").style.display = "none";
        document.getElementById("flip-main-two").style.background = "";
        document.getElementById("flip-main-three").style.background = "";
        document.getElementById("flip-main-four").style.background = "";
    } else if (k === 4) {
        document.getElementById("flip-main-four").style.background = "rgba(105,193,132,1)";
        document.getElementById("sub-menu-one").style.display = "none";
        document.getElementById("sub-menu-two").style.display = "none";
        document.getElementById("flip-main-one").style.background = "";         
        document.getElementById("flip-main-three").style.background = "";
        document.getElementById("flip-main-two").style.background = "";
    } else {
        document.getElementById("sub-menu-one").style.display = "none";
        document.getElementById("sub-menu-two").style.display = "none";
    }
}
function rotateIcon(m) {
  var key = m;
if ( key === 2)
  {
   
   if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-caret-down")
     {
      
       document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-caret-down";
       
       }
    else
      {
         document.getElementById("first-drop-down-icon").className="spinner-icon in fa fa-caret-down";
         document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
        }
    
   
    }
  else if(key === 3)
    {
      if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-caret-down")
     {
      
       document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-caret-down";
       }
    else
      {
         document.getElementById("second-drop-down-icon").className="spinner-icon in fa fa-caret-down";
         document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-caret-down";
        }
      }
    else{
        document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-caret-down";
        document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-caret-down";
    }
}
.flip-container-main-menu-parent{
         cursor: pointer;
         margin-left: -1rem;
        padding-left: 1rem;
        margin-right: -1rem;
        padding-bottom: .5rem;
    }
    .flip-menu-main-icon{
        float:none;
        margin-right:10px;
        margin-left: 0; 
        position: relative;
        top:0;
        min-width: 1.5rem;
        list-style-type: none;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
     }
    .fa.flip-menu-main-icon{
        font-size: 13px;
        width: 1em;
        height: 1em;
        line-height: 2.5rem;
        font-style: normal;
        font-weight: normal;
        opacity:1;
    } 
    .flip-menu-text{
        text-align: left;
        font-weight:500;
        line-height: 1.125rem;
        padding: .5625rem 0;
        margin: 0;
        outline: 0;
        border: 0;
        font-size: 14px;
    }
    .flip-sub-menu{
        opacity: 0.75;
        padding-top: .4375rem;
        padding-bottom: .4375rem;
        padding-right: 9.4rem;
        padding-left: 4rem;
        margin-left: -2rem;
        text-align: left;
        line-height: 1.125rem;
        display:block;
        background-color: rgba(24,33,118,1);
        color: rgba(255,255,255,.87)!important;
        width: 100%;
        display: none;
    }
    ul.flip-sub-menu li a{
        color: rgba(255,255,255,.87)!important;
        line-height: 2rem;
    }
    #flip-up-container .flip-up-container-main-menu-parent:hover
    {
        background-color: #122112;
    }
    #flip-up-container ul:hover{
        background-color: #122112;
    }
    .flip-container-sub-menu-one li a
    {
        color: white;
    }
    .flip-container-submenu-one li:hover{
        background-color: #0f0f3e;
    }
    .flip-container-sub-menu-two li a
    {
        color: white;
    }
    .flip-container-sub-menu-two li:hover{
        background-color: #0f0f3e;
    } 
    .flip-menu-drop-down-icon{
        float: right;
        padding-right: 5%;
        margin-top: 5%;
        margin-left:-3rem;
    }
.spinner-icon{
        font-size:13px;
        float: right;
        margin-top: 5%;
        margin-right: 7%;
        transition: all 0.3s ease-in-out;
        opacity:0.75;
}
.fa.spinner-icon{
    font-size: 13px;
}
.spinner-icon.in{
    transform: rotate(-180deg);
}
.spinner-icon.out{
    transform:rotate(0deg);
}
    .flip-container-main-menu-parent:hover {
        background-color:rgba(24,33,118,1);
        font-weight: 600;
    }
    .flip-sub-menu li:hover{
        background-color: rgba(120,130,140,.13);
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

                <ul class="flip-container-main-menu">
                    <li class="flip-container-main-menu-parent" id="flip-main-one" onclick="displaySubMenu(1);rotateIcon('first-drp-down-icon');"><i class="flip-menu-main-icon fa fa-glass "></i><span class="flip-menu-text">Dashboard</span></li>
                    <li class="flip-container-main-menu-parent" id="flip-main-two" onclick="displaySubMenu(2);rotateIcon(2);"><i class="flip-menu-main-icon fa fa-th"></i><span class="flip-menu-text">Apps</span> <i id="first-drop-down-icon" class="spinner-icon fa fa-caret-down"></i> </li>
                        <ul id="sub-menu-one" class="flip-sub-menu"> 
                            <li>   <a href="#">Inbox</a>    </li>
                            <li>   <a href="#">Condact</a>  </li>
                            <li>   <a href="#">Calendar</a> </li>
                        </ul>
                    <li class="flip-container-main-menu-parent" id="flip-main-three" onclick="displaySubMenu(3);rotateIcon(3);"><i class="flip-menu-main-icon fa fa-th-large"></i><span class="flip-menu-text">Layouts</span><i id="second-drop-down-icon" class="spinner-icon fa fa-caret-down"></i>  </li>
                        <ul id="sub-menu-two" class="flip-sub-menu">
                            <li>    <a href="#">Header</a>  </li>
                            <li>    <a href="#">Aside</a>   </li>
                            <li>    <a href="#">Footer</a>  </li>
                        </ul>
                    <li class="flip-container-main-menu-parent" id="flip-main-four"onclick="displaySubMenu(4);rotateIcon(4);"><i class="flip-menu-main-icon fa fa-align-justify"></i><span class="flip-menu-text">Widjets</span></li>
            </ul>