CSS 在悬停时改变颜色

Question

我正在尝试用第二次覆盖我的第一个“颜色变化”。 我希望我的图标在悬停文本时为银色，在悬停图标时为红色。

我试过了：

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/

Answer 1

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

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

来源： https://developer.mozilla.org/en/docs/Web/CSS/Specificity

---

在您的情况下，.delDoc:hover 不如 .liDoc:hover > .delDoc 特定。所以只需将.delDoc:hover 替换为.liDoc > .delDoc:hover 或.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>

Answer 2

你快到了。问题是第一个选择器比第二个选择器更具体，因此它具有优先权。您可以轻松地解决这个问题，而无需任何 !important 关键字，只需专门指定第二个选择器：

    .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>

Answer 3

问题是，您的第一个选择器更具体：

所以这个选择器：.liDoc:hover > .delDoc 比 .delDoc:hover.

当您检查元素时，您会看到 .delDoc:hover 样式，其中 color: red 被应用，但由于特殊性而被 .liDoc:hover > .delDoc 覆盖。

最简单的解决方案是使用!important：

.delDoc:hover { color: red !important; }

但是使用重要的被认为是一种不好的做法。

另一种解决方案是使第二个选择器比第一个更具体：

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

稍微清理一下可能会导致这种情况：https://jsfiddle.net/zt393xjm/2/

Answer 4

您需要设置链接本身的样式，而不是其周围的元素。 为 a 元素添加一个类。

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

那么你可以做以下事情

a.button:link{
  color:red;
}

a.button:hover{
  color:yellow;
}

Answer 5

试试这个： https://jsfiddle.net/16Lr39mh/

这里我使用.liDoc .delDoc:hover在悬停时改变颜色。