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;
}

Answer 2

您在悬停时更改了background-image，但随后立即将background设置为无。

您需要从所有悬停状态background:none ;

中删除此行

header.sticky nav.main_menu > ul > li:nth-child(1):hover {
    background-image:url('../img/OUTNOW-h.png');
    color:#fff ;
    background:none;
}

或者可能将background-color设置为合适的东西：

   header.sticky nav.main_menu > ul > li:nth-child(1):hover {
        background-image:url('../img/OUTNOW-h.png');
        color:#fff ;
        background-color: transparent;
    }

要更改文字颜色，您还需要另一个悬停块来定位嵌套的a标记：

header.sticky nav.main_menu > ul > li:hover a {
    color: #FFF;
}

你不需要这个街区的第二个孩子

正如其他人所说，这是一个很糟糕的方法。相反，你应该使用精灵表并改变背景位置

Answer 3

你只需要在悬停时改变

 background-color: transparent;

删除

的样式

background:none;

尝试更改导航项背景图像：悬停在另一个伪类上

3 个答案: