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

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

尝试使用特定的行悬停效果，如下所示：

并将货币的背景颜色更改为绿色到白色。

.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 3

当你想做的是在ul li上给出样式然后考虑作为父＆gt;儿童。所以你需要的是在li的悬停时改变背景颜色和颜色。

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

我做的是，我将鼠标悬停在你的下拉菜单上。你可以根据＆gt;为更多的孩子做这件事。选择器。

Answer 4

只需添加以下css即可获得预期输出。

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