时间戳

首页 > 解决方案 > 悬停颜色更改上的 CSS 不会影响 i 标签

html - 悬停颜色更改上的 CSS 不会影响 i 标签

问题描述

我创建了包含 2 个标签的 div：span 和 i。我试图在 div 上添加悬停，这将改变颜色和光标，但在 i 标签上颜色不会改变。

.example {
    margin: 20px;
    position: fixed;
    display: inline;
}
.example i {
    border: solid #8690ab;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    line-height: 10px;
    position: relative;
    top: -15px;
}
.example span {
    display: inline-block;
    padding: 0px;
    color: #8690ab;
    margin: 5px 15px;
    vertical-align: middle;
    position: relative;
    top: -15px;
}

.example:hover, .example:hover i, .example:hover span{   
    cursor: pointer;
    color: #a9afc0;
}
<div class="example">
  <span>text</span>
  <i className="arrowdown"></i>
</div>

如何更改 i 标签的颜色？有更好的方法吗？

标签： htmlcss

解决方案

颜色标签只改变标签中文本的颜色。由于没有文本，因此不会发生任何事情。如果需要，您可以尝试更改边框颜色：

.example:hover, .example:hover i, .example:hover span{   
    cursor: pointer;
    border-color: #a9afc0;
    color: #a9afc0;
}

推荐阅读