html - wordpress 中菜单事件项上的背景图像未突出显示

Question

我在 wordpress 中创建了一个菜单，其中主页由图像而不是“主页”一词表示，并将其作为背景图像插入。问题是事件菜单项也有高亮效果，当主页处于事件状态时我的图像没有显示。

我的代码是:

#topmenu li:first-child a {
    color: transparent;
}

#topmenu li:first-child {
    background-image: url('http://localhost/plugandboomwordpress/wp-content/uploads/2015/04/logo.png');
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: bottom;
}

#topmenu a:hover {
background: darkgray;
color: white;
transition: background-color .5s;
}

#topmenu li:first-child a:hover {
    background-image: url('http://localhost/plugandboomwordpress/wp-content/uploads/2015/04/logo.png');
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: bottom;
}

#topmenu .current-menu-item a {
    background: darkgray;
    color: white;
}

关于如何解决这个问题的任何想法？谢谢!

Answer 1

首先尝试将重复的 css 分组到这样的组中:

#topmenu li:first-child,
#topmenu li:first-child a:hover{
    background-image: url('http://localhost/plugandboomwordpress/wp-content/uploads/2015/04/logo.png');
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: bottom;
}

然后尝试在这些规则之后添加 !important:

#topmenu .current-menu-item:first-child a {
    background-image: url('http://localhost/plugandboomwordpress/wp-content/uploads/2015/04/logo.png') !important;
}