html - 尝试使用 :hover on another pseudo class 更改导航项背景图像

Question

我在这个网站上工作 MY Site .向下滚动时，您可以看到带有每个元素背景图像的粘性导航菜单。我已设法使用以下 CSS 添加图像。

 header.sticky nav.main_menu > ul > li:nth-child(1)
 {
background-image:url('../img/OUTNOW.png');}
header.sticky nav.main_menu > ul > li:nth-child(2) 
{
background-image:url('../img/ARTIST.png');}
header.sticky nav.main_menu > ul > li:nth-child(3) 
{
background-image:url('../img/aboutus.png');}
header.sticky nav.main_menu > ul > li:nth-child(4)
 {
background-image:url('../img/CONTACT.png');}
header.sticky nav.main_menu > ul > li:nth-child(5) 
{
background-image:url('../img/SUBMISSION.png');}
header.sticky nav.main_menu > ul > li:nth-child(6) 
{
background-image:url('../img/TV.png');}

并且在悬停时我需要另一个白色文本颜色的白色图像。为此我添加了以下 css

header.sticky nav.main_menu > ul > li:nth-child(1):hover
 {
background-image:url('../img/OUTNOW-h.png');
color:#fff ;
background:none ;
}
header.sticky nav.main_menu > ul > li:nth-child(2):hover
{
background-image:url('../img/ARTIST-h.png');
color:#fff ;
background:none ;
}
header.sticky nav.main_menu > ul > li:nth-child(3):hover
{
background-image:url('../img/aboutus-h.png');
color:#fff ;
background:none ;
}
header.sticky nav.main_menu > ul > li:nth-child(4):hover
 {
background-image:url('../img/CONTACT-h.png');
color:#fff ;
background:none ;
}
header.sticky nav.main_menu > ul > li:nth-child(5):hover
{
background-image:url('../img/SUBMISSION-h.png');
color:#fff ;
background:none ;
}
header.sticky nav.main_menu > ul > li:nth-child(6):hover
{
background-image:url('../img/TV-h.png');
color:#fff ;
background:none ;
}

但这行不通。我不知道我哪里出错了。请帮忙!!谢谢!!!!

Answer 1

如回答here ，你不能有双伪类。

我的第一个想法是为 li 元素提供唯一的 ID。然后我意识到您使用的是自动生成 ID 的 CMS，如果您在 CMS 中进行更改，这会使该解决方案存在风险。

CSS

header.sticky nav.main_menu > ul > li#nav-menu-item-7549 {
    background-image:url('../img/OUTNOW.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-3260 {
    background-image:url('../img/ARTIST.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7550 {
    background-image:url('../img/aboutus.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7551 {
    background-image:url('../img/CONTACT.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7486 {
    background-image:url('../img/SUBMISSION.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7363 {
    background-image:url('../img/TV.png');
}


header.sticky nav.main_menu > ul > li#nav-menu-item-7549:hover {
    background-image:url('../img/OUTNOW-h.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-3260:hover {
    background-image:url('../img/ARTIST-h.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7550:hover {
    background-image:url('../img/aboutus-h.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7551:hover {
    background-image:url('../img/CONTACT-h.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7486:hover {
    background-image:url('../img/SUBMISSION-h.png');
}

header.sticky nav.main_menu > ul > li#nav-menu-item-7363:hover {
    background-image:url('../img/TV-h.png');
}

虽然 Twocode 的解决方案应该可行，但正如您在评论中所说，需要额外的 Photoshop 工作。但我认为这是最安全的解决方案。

CSS

/* Set the menu item background images */
header.sticky nav.main_menu > ul > li#OUTNOW {
    background-image:url('../img/OUTNOW.png');
}

header.sticky nav.main_menu > ul > li#ARTIST {
    background-image:url('../img/ARTIST.png');
}

header.sticky nav.main_menu > ul > li#ABOUTUS {
    background-image:url('../img/aboutus.png');
}

header.sticky nav.main_menu > ul > li:nth-child(4) {
    background-image:url('../img/CONTACT.png');
}

header.sticky nav.main_menu > ul > li:nth-child(5) {
    background-image:url('../img/SUBMISSION.png');
}

header.sticky nav.main_menu > ul > li:nth-child(6) {
    background-image:url('../img/TV.png');
}


/* Move up the background image on hover */
header.sticky nav.main_menu > ul > li:hover {
    background-position: 0 -80px;
}