CSS 上 hover 顏色變化不影響我標簽

Question

我創建了包含 2 個標簽的 div：span 和 i。 我嘗試在 div 上添加 hover 會改變顏色和 cursor 但在 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 標簽的顏色？ 有更好的方法嗎？

Answer 1

顏色標簽只改變標簽中文本的顏色。 由於沒有文本，因此不會發生任何事情。 如果需要，您可以嘗試更改邊框顏色：

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

Answer 2

 .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: #4287f5; cursor: pointer; border-color: #4287f5; }

 <div class="example"> <span>text</span> <i className="arrowdown"></i> </div>