Question

您好我在侧栏上使用列表项时遇到问题。

我在导航栏的列表项目中使用图像，每当我将鼠标悬停在图像上时，图像后面会出现白色背景，我不知道如何解决此问题。

请帮帮我。

以下是屏幕截图 Screenshot

这是代码

<ul class="nav nav-sidebar">

                <li><a href="#"><img src="Side_Bar_BackToTop.png"></a></li>
                <li><a href="#"><img src="Side_Bar_About.png"></a></li>
                <li><a href="#"><img src="Side_Bar_History.png"></a></li>
                <li><a href="#"><img src="Side_Bar_Movie.png"></a></li>

</ul>

CSS：

.sidebar{
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #905c2a;
border-right: 1px solid #eee;
width: 200px;
[}

.nav-sidebar{
    position: fixed;
    left: -20px;

}

.nav-sidebar li{
    margin-bottom: 10px;
}
.nav-sidebar li a{
    text-decoration: none;
}
.nav-sidebar li  img:hover{
    border-top: 2px solid #f4d37f;
    border-bottom: 2px solid #f4d37f;
}][1]

Answer 1

我猜你正在使用bootstrap。请告诉我这是否符合您的预期。谢谢！

这是小提琴：fiddle

添加了以下样式以删除图像背后的背景：

.nav-sidebar li a:focus, .nav-sidebar li a:hover {
    text-decoration: none;
    background-color: transparent;
 }

列表项背景在悬停时更改颜色

1 个答案: