新人問問題，li 中背景顏色問題，大神解答下
<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>導航</title>
?? ?<link rel="stylesheet" type="text/css" href="dh1.css">
?? ?<script type="text/javascript" src="dh1.js"></script>
</head>
<body>
<div id="daoh">
<ul id='ul'>
?? ?<div id="all">全部商品分類</div>
?? ?<li><a href="#"><span color="black">電器、小商品、家用</span></a></li>
?? ?<li><a href="#">衣服、鞋子、內褲</a></li>
?? ?<li><a href="#">玻璃杯</a></li>
?? ?<li><a href="#">電器、小商品、家用</a></li>
?? ?<li><a href="#">電器、小商品、家用</a></li>
?? ?<li><a href="#">電器、小商品、家用</a></li>
?? ?<li><a href="#">電器、小商品、家用</a></li>
?? ?<li><a href="#">電器、小商品、家用</a></li>
?? ?<li><a href="#">電器、小商品、家用</a></li>
?? ?<li><a href="#">電器、小商品、家用</a></li>
?? ?<li><a href="#">電器、小商品、家用</a></li>
</ul>
<div id='newpa'>
</div>
</body>
</html>
css 如下：
{
?? ?margin: 0px,0px;
?? ?padding: 0px;
}
#ul {
?? ?width: 200px;
?? ?display: black;
?? ?border: 1px solid;
?? ?color: white;
?? ?margin-left:8px;
?? ?padding-left: 8px;
?? ?text-indent: 8px;
}
#all{
?? ?width: 200px;
?? ?height: 50px;
?? ?line-height: 48px;
?? ?font-size: 25px;
?? ?background-color:#B1191A;
?? ?padding-bottom: 5px;
?? ?}
#ul li{
?? ?display: block;
?? ?list-style-type: none;
?? ?text-decoration-style: none;
?? ?width: 200px;
?? ?height: 35px;
?? ?background-color:#C81623;
?? ?line-height: 33px;
?? ?background-image: url(jiantou.PNG);
?? ?background-repeat:no-repeat;
?? ?background-position: right;
}???? ?
a {
?? ?color:white;
?? ?text-decoration:none;
}
a:hover{
?? ?text-decoration:underline;
?? ?font-weight: bold;
?? ?color: red;
}
li:hover
{
?? ?display: block;
?? ?background-image: none;
?? ?background-color: white;
?? ?border:1px solid? #DDD;
?? ?border-right:0;
?? ?box-shadow: 0 0 8px #DDD;
}
對li標簽進行hover時發現有個問題，
鼠標經過時，
????background-image: none;
?? ?background-color: white;
并未起作用，
邊框和陰影出現了，
將 li:hover 前加上#ul ，能實現所有hover 效果；
后來測試時,寫li 樣式時，將#ul li{}? 和#ul li:hover，可實現所有效果；
li{}和#ul li:hover{}，可實現所有效果；
li{}和li:hover{} 可實現所有效果
唯獨#ul li{}? 和li:hover無法更改背景狀態，但是邊框和陰影都出現了，這個原因是？
2016-04-25
我也是這個問題 ?我只在li hover 那里改變的背景顏色 之后可以正常顯示效果 希望可以幫到你
.topmenu li:hover{
border: 1px solid #ddd;
border-right:0;
box-shadow: 0 0 8px #ddd;
background: black;
}
2016-04-05
#ul li{
?? ?display: block;
?? ?list-style-type: none;
?? ?text-decoration-style: none;
?? ?width: 200px;
?? ?height: 35px;
?? ?background-color:#C81623;
?? ?line-height: 33px;
?? ?background-image: url(jiantou.PNG);
?? ?background-repeat:no-repeat;
?? ?background-position: right;
} ? ? ?
代碼第一行的 ?#ul ? 去除 即可！