悬停时列表项背景颜色改变

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：fiddle

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

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

悬停时列表项背景颜色改变

List item background changed color while hover

html

css

hover

listitem