Question

我正在使用此网站MY Site。菜单栏在悬停时显示黑色。我需要在每个菜单项上悬停显示不同的颜色。我在我的CSS中尝试了以下代码但是没有工作

nav.main_menu>ul>li:hover>a span:nth-of-type(1){background-color:#161f30 !important;}     nav.main_menu>ul>li:hover>a span:nth-of-type(2){background-color:#161f30 !important;}

我也试过

nav.main_menu>ul>li :nth-of-type(1):hover >a span{background-color:#161f30;}nav.main_menu>ul>li :nth-of-type(1):hover >a span{background-color:#161f30;}

这也没有用。任何人都可以帮我实现这个目标吗？请！！谢谢！

Answer 1

尝试以下

.main_menu > ul > li:nth-child(1):hover > a span {
    // styles
}

最好是在nav元素中添加类。

.main_menu-home { // styles }
.main_menu-artists { // styles }

等等

Answer 2

试试这个 css

    nav.main_menu > ul > li:nth-child(1):hover {
    background:#ff0000 !important;
}
nav.main_menu > ul > li:nth-child(2):hover {
    background:#ff00ff !important;
}
nav.main_menu > ul > li:nth-child(3):hover {
    background:#ff0ff0 !important;
}
nav.main_menu > ul > li:nth-child(4):hover {
    background:#ff0aa0 !important;
}
nav.main_menu > ul > li:nth-child(5):hover {
    background:#ff0eee !important;
}
nav.main_menu > ul > li:nth-child(6):hover {
    background:#ff0dd0 !important;
}

主菜单的不同悬停颜色

2 个答案: