时间戳

首页 > 解决方案 > 在悬停时更改单个 li 的颜色

html - 在悬停时更改单个 li 的颜色

问题描述

将鼠标悬停在上方时，我正在努力更改该特定 li 的字体颜色。当鼠标从白色到黑色指向 li 时，我的代码无法正常工作。

.tags-list li{display:inline-block;background-color:#253b5d;    padding: 1px 10px !important;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 14px;   
    transition: all 1s linear;
    }
.tags-list li:hover{background-color: #aebdd5;}
.tags-list li a{transition: all 1s linear;color:white;}
.tags-list ul li a:hover{color:black;}
<ul class="tags-list">
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
</ul>

标签： htmlcss

解决方案

去掉ul.，.tags-list已经提到了ul。它不包含另一个ul.

.tags-list li{display:inline-block;background-color:#253b5d;    padding: 1px 10px !important;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 14px;   
    transition: all 1s linear;
    }
.tags-list li:hover{background-color: #aebdd5;}
.tags-list li a{transition: all 1s linear;color:white;}
.tags-list li a:hover{color:black;}
<ul class="tags-list">
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
<li><a href="#">Testing</a></li>
</ul>

推荐阅读