0

I'm using JQuery to hilight an "icon" of an icon bar, but when I set the background property I lose the :hover color hilighting, i.e. if I set a yellow background it remains yellow.

I want to be able to programmatically change the color of the icon but having the icon color to change to darkgrey when the mouse is over it (I'd like to do the first thing with jquery and the second with css)

Can you help me?

$("#myId").css("background-color", "yellow");
.icon-bar {
 z-index: 9999999999;
    width: 336px; 
    background-color: #EFEFEF; 
    overflow: auto; 
}

.icon-bar a {
    float: left; 
    text-align: center;
    width: 40px; 
    padding: 6px 0; 
    transition: all 0.3s ease; 
    color: navy;
    border-left: 1px solid navy;
    border-right: 1px solid navy;
    font-size: 20px; 
}


.icon-bar a:hover {
    background-color: darkgrey;
}

.active {
    background-color: yellow; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="icon-bar">
   <a id="myId"  href="#">A</a>
</div>
cdarwin
  • 3,801
  • 8
  • 38
  • 56

0 Answers0