Question

我试图覆盖我的第一次变色＆＃34;一秒钟。我希望在悬停文字时我的图标上有银色，并且在悬停图标时有红色图标。

我试过了：

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个关键字：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

特异性是应用于给定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/）：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

在这里，我使用.liDoc .delDoc:hover在悬停时进行颜色更改。

Answer 4

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

所以这个选择器：.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 5

您需要设置链接本身的样式而不是围绕它的元素。在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;
}

CSS在悬停时更改颜色

5 个答案: