css中使用偽類將li中的a標簽顏色改變
最近在寫專案的時候由于li標簽下嵌套著a標簽
給li加hover達不到滑鼠懸浮到空白處的時候使a標簽變色
話不多說上代碼：
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
body {
background-color: #f3f5f7;
}
.cateogry {
width: 190px;
height: 420px;
margin:200px auto;
font-size: 14px;
background-color: rgba(19, 1, 75, 0.6);
}
.cateogry li {
width: 190px;
height: 46.55px;
line-height: 46px;
}
/* 劃重點 兩個偽類后邊會用得到 */
.cateogry li:hover{
background-color: rgb(19, 1, 75);
}
.cateogry li a:hover{
color: orangered;
}
/* 劃重點 兩個偽類后邊會用得到 */
.cateogry a {
margin-left: 20px;
color: white;
}
.cateogry span {
float: right;
margin-right: 20px;
}
<div class="cateogry">
<ul>
<li><a href="">前端開發<span> > </span></a></li>
<li><a href="">Java開發<span> > </span></a></li>
<li><a href="">Php開發<span> > </span></a></li>
<li><a href="">人工智能<span> > </span></a></li>
<li><a href="">運維<span> > </span></a></li>
<li><a href="">大資料<span> > </span></a></li>
<li><a href="">測驗<span> > </span></a></li>
<li><a href="">UI設計<span> > </span></a></li>
<li><a href="">電競<span> > </span></a></li>
</ul>
</div>
運行截圖：
解決辦法
.cateogry li:hover{
background-color: rgb(19, 1, 75);
}
.cateogry li:hover a {
color: orangered;
}
當滑鼠懸浮到li上時 a的顏色變為橘紅色；
即是：滑鼠懸浮到空白處a標簽也會變色
運行截圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/57755.html
標籤：其他