Question

当我将鼠标悬停在粉红色的导航栏中时，我的任务是更改导航栏中的第一级项目，默认情况下，第二级项目应为粉红色，而当我将鼠标悬停时则为蓝色。

实际上，第一层的颜色没有变化，第二层的颜色没有变化，第二层的颜色没有变化，第二层的颜色没有变化。

这是我的代码：

html .nav .item .dropdown,
body .nav .item .dropdown,
html .nav .item .dropdown-menu,
body .nav .item .dropdown-menu {
  background-color: HotPink;
}

html .nav .item .dropdown .active:hover,
body .nav .item .dropdown .active:hover,
html .nav .item .dropdown-menu .active:hover,
body .nav .item .dropdown-menu .active:hover,
html .nav .item .dropdown .inside_item,
body .nav .item .dropdown .inside_item,
html .nav .item .dropdown-menu .inside_item,
body .nav .item .dropdown-menu .inside_item {
  text-transform: none;
}
html .nav .item .dropdown .active:hover:hover,
body .nav .item .dropdown .active:hover:hover,
html .nav .item .dropdown-menu .active:hover:hover,
body .nav .item .dropdown-menu .active:hover:hover,
html .nav .item .dropdown .inside_item:hover,
body .nav .item .dropdown .inside_item:hover,
html .nav .item .dropdown-menu .inside_item:hover,
body .nav .item .dropdown-menu .inside_item:hover {
  background-color: lightSkyBlue;

如何使它们发挥作用？

Answer 1

它应该相当简单明了。

看起来应该是这样的;

/ *正常状态* /

.dropdown {
background-color: //color;
}

如果您想在悬停时更改下拉列表的颜色，则添加;

.dropdown:hover {
background-color: //color;
}

如果你更深入一点;

.dropdown .active {
//color
}

如果你想在悬停时改变bg颜色;

.dropdown .active:hover {
//color}

如何在用户点击导航栏项时更改其颜色？

1 个答案: