CSS悬停时更改颜色

本文介绍了CSS悬停时更改颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！我想用第二个覆盖我的第一个颜色变化。我想在图标上有一个银色，当悬停文字时，图标上有红色图标。我试过了： / b> HTML < ul> < li class =liDoc>< a href =>我的连结< / a> 图标< / 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> < / li> CSS .delDoc { color：transparent; font-size：12px; } .docLink：hover> .delDoc { color：silver; } .delDoc：hover { color：red; } FIDDLE 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> 图标 < / 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> icon</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> </li>CSS.delDoc{ color: transparent; font-size: 12px;}.docLink:hover > .delDoc { color: silver;}.delDoc:hover{ color: red;}FIDDLEhttps://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/SpecificityIn 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> icon </li></ul> 这篇关于CSS悬停时更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！