Question

我一直在尝试将悬停图像放在菜单（li）上，但是我不知道自己在哪里做错了。这是我的CSS代码和html链接。有人可以帮我指出我的错误吗？

.topmenu1
{
	background-image: url(../img/img_upload/mainmenu001.png);
	background-repeat: no-repeat;
	background-position: 50% 0px;
	left: -84px;
	width: 185px;
}
.topmenu1 a {width: 210px;}

#topmenu1 a:hover {
	background-image: url(../img/img_upload/mainmenu001over.png);
	background-repeat: no-repeat;
}

<nav id = "category" class = "drawer_block pc"> 
<ul class = "category-nav">


<li class="topmenu1"><a href="#"></a></li>
<li class="topmenu2"><a href="#"></a> </li>
<li class="topmenu3"><a href="#" onlick="window.open(`#`)"></a> </li>
<li class="topmenu4"><a href="#"></a></li>
<li class="topmenu5"><a href="#"></a> </li>
<li class="topmenu6"><a href="#"></a></li>
<li class="topmenu7"><a href="#"></a></li>
</ul>

这是我的网站azlily，我一直在这里尝试将鼠标悬停在菜单栏上。

Answer 1

您在li标签中分配了图片，并在<a>标签中将鼠标悬停了，因此该图片无法显示。

尝试将鼠标悬停在li标签上

.topmenu1:hover {
    background-image: url(../img/img_upload/mainmenu001over.png);
    background-repeat: no-repeat;
}

Answer 2

你有这个 CSS中的.category-nav a:hover { background: rgba(204, 204, 204, 0.1);}代码段已覆盖.topmenu1 a:hover

的悬停效果

，并且应该有.topmenu1个#topmenu1。但我认为这是一个打字错误。

尝试在背景图片后面添加!important。

.topmenu1 a:hover {
background-image: url(../img/img_upload/mainmenu001over.png) !important;
background-repeat: no-repeat;

}

Answer 3

您已经定义了background: rgba(204, 204, 204, 0.1);属性，并且background属性不能覆盖background-image属性。因此请尝试添加!important。试试这个代码。

.topmenu1 a:hover {
    background-image: url(../img/img_upload/mainmenu001over.png) !important;
    background-repeat: no-repeat !important;
}

李类中的悬停效果

3 个答案: