更改鼠标悬停行的背景颜色

Question

一旦我们鼠标悬停在“货币”上，我们可以看到如下所示：

我需要的是，一旦我们鼠标悬停在特定货币[行]上，它应该显示不同的背景颜色，如下所示。

<style type="text/css">
.menuBackground {
    background: brown;
    text-align: center;
}
.dropDownMenu a {
    color: #FFF;
}
.dropDownMenu,
.dropDownMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dropDownMenu li {
    position: relative;
}
.dropDownMenu a {
    padding: 10px 20px;
    display: block;
    text-decoration: none;
}
.dropDownMenu a:first-child { 
color: #000; 
}
.dropDownMenu > li {
    display: inline-block;
    vertical-align: top;
    margin-left: -4px; /* solve the 4 pixels spacing between list-items */
}
.dropDownMenu > li:first-child {
    margin-left: 0;
}
.dropDownMenu ul {
    box-shadow: 2px 2px 15px 0 rgba(0,0,0, 0.5);
}
.dropDownMenu > li > ul {
    text-align: left;
    display: none;
    background: green;
    position: absolute;
    top: 100%;
    left: 0;
    width: 240px;
    z-index: 999999;
}
</style>

怎么样？

Answer 1

它很好地在锚标签上添加颜色而不是li，因为你已经在锚点上设置了颜色，所以只需在锚点上添加悬停css你就会看到你想要的东西。

.dropDownMenu li a:hover {
   background: #fff; /*Your color*/
   color: #000; /*Your color*/
}

Answer 2

当你想要做的是给ul li上的样式然后考虑作为父>孩子。所以你需要的是改变li悬停时的背景颜色和颜色。

.dropDownMenu a:hover {
    color: #000;
    background: #fff;
}

我做的是，我给你的下拉菜单悬停css。你可以根据>选择器为更多的孩子做这件事。

Answer 3

试试这个，对特定的行悬停效果如下：

并改变货币的背景颜色，将绿色悬停为白色。

.dropDownMenu > li > ul {
  background: white none repeat scroll 0 0;
  display: block !important;
  left: 0;
  position: absolute;
  text-align: left;
  top: 100%;
  width: 240px;
  z-index: 999999;
}

ul.dropDownMenu li ul li:hover {
  background-color: green;
}

Answer 4

只需添加以下css将使您的预期输出。

#select-language ul li:hover
{
  background-color:white
}