为什么设置背景时会丢失锚的：hover颜色

Question

我正在使用JQuery来使图标栏的“图标”变亮，但是当我设置background属性时，我失去了：hover颜色的变亮，即，如果我设置了黄色背景，它将保持黄色。

我希望能够以编程方式更改图标的颜色，但是当鼠标悬停在图标上方时，让图标颜色变为深灰色（我想用jquery做第一件事，用css做第二件事）< / p>

你能帮我吗？

$("#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>