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

Question

将鼠标悬停在 "currency" 上后，我们可以看到下拉菜单如下：

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

<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

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

并将货币 li hover 的背景颜色更改为白色。

.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 上给出样式，然后考虑 parent > child。所以你需要的是改变li的背景颜色和悬停颜色。

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

我所做的是，我在鼠标悬停在您的下拉菜单上时给出 css。你可以根据>选择器做更多child。

Answer 4

只需添加以下内容 css 即可获得您预期的输出结果。

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

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

Change background-color of mouse-over row

html

css

mouseover

background-color