CSS悬停时更改颜色 [英] CSS Change color on hover

问题描述

我想用第二个覆盖我的第一个颜色变化。
我想在图标上有一个银色，当悬停文字时，图标上有红色图标。

我试过了： / b>

HTML

 < ul> 
< li class =liDoc>< a href =>我的连结< / a> < i class =fa fa-trash delDoc>图标< / i>< / li> 
  

CSS

  .delDoc {
 color：transparent; 
 font-size：12px; 
光标：指针; 
} 
 
 .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

< a href =https://jsfiddle.net/zt393xjm/ =nofollow noreferrer> https://jsfiddle.net/zt393xjm/

解决方案

在这种情况下，您不应该使用和避免使用！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/ ）：

.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 =stylesheet/>< ul> < li class =liDoc>< a href =>我的连结< / a> < i class =fa fa-trash delDoc>图标< / i> < / li>< / ul>

I'm trying to override my first "color change" with a second. I'd like to have a silver color on my icon, when hover the text, and red color icon when hovering the icon.

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

Also i tried:

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/

解决方案

You shouldn't use and avoid using !important in this case, because you can solve it with Specifity:

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When specificity is equal to any of the multiple declarations, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted element will always take precedence over rules which an element inherits from its ancestor.

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

---

In your case the .delDoc:hover is less specific as the .liDoc:hover > .delDoc. So simply replace the .delDoc:hover with .liDoc > .delDoc:hover or .liDoc:hover > .delDoc:hover.

Please do not use !important! The use of !important should be discouraged!

---

The Code (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>

这篇关于CSS悬停时更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！