CSS 悬停时更改颜色

我试图用第二个来覆盖我的第一个“颜色变化”。 我希望在悬停文本时在图标上显示银色，在悬停图标时在图标上显示红色图标。

I tried:

HTML

<ul>
  <li class="liDoc"><a href="">My link</a> <i class="fa fa-trash delDoc">icon</i></li>

CSS

.delDoc {
  color: transparent;
  font-size: 12px;
  cursor: pointer;
}

.liDoc:hover > .delDoc {
  color: silver;
}

.delDoc:hover {
  color: red;
}

我也尝试过：

HTML

<li class="liDoc"><a href="" class="docLink">'+value+'</a> <i class="fa fa-trash delDoc"></i></li>

CSS

.delDoc{
    color: transparent;
    font-size: 12px;
}
.docLink:hover > .delDoc {
    color: silver;
}
.delDoc:hover{
    color: red;
}

FIDDLE
https://jsfiddle.net/zt393xjm/

你不应该使用和避免使用!important在这种情况下，因为你可以用 Specificity 来解决它：

特异性是应用于给定 CSS 声明的权重，由匹配选择器中每个选择器类型的数量决定。当特异性等于多个声明中的任何一个时，CSS 中找到的最后一个声明将应用于该元素。仅当多个声明以同一元素为目标时，特异性才适用。根据 CSS 规则，直接目标元素将始终优先于元素从其祖先继承的规则。

source: https://developer.mozilla.org/en/docs/Web/CSS/Specificity

在你的情况下.delDoc:hover不太具体，因为.liDoc:hover > .delDoc。所以只需更换.delDoc:hover with .liDoc > .delDoc:hover or .liDoc:hover > .delDoc:hover.

请不要使用!important！指某东西的用途!important应该气馁！

代码 （https://jsfiddle.net/zt393xjm/4/):

.delDoc {
  color: transparent;
  font-size: 12px;
  cursor: pointer;
}
.liDoc:hover > .delDoc {
  color: silver;
}
.liDoc > .delDoc:hover {
  color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
  <li class="liDoc"><a href="">My link</a>  <i class="fa fa-trash delDoc">icon</i>
  </li>
</ul>