[英]CSS element pseudo not overwrite child element style
所以我想为包含其他 html 元素的锚元素设置样式。 基本代码是:
HTML:
<div class="container" id="sub-menu">
<div class="row" data-bind="foreach: subMenu">
<a href="#">
<div class="col-md-3 col-sm-6">
<h3><span>title</span></h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</div>
</div>
</a>
</div>
</div>
引导类不会打扰你:)
这是CSS(从less生成):
#sub-menu {
margin-top: 10px;
}
#sub-menu a span {
color: black;
}
#sub-menu a div {
color: #6b6b6b;
}
#sub-menu a:hover {
color: red !important;
text-decoration: none;
}
目标是当用户将鼠标悬停在锚点上时,文本颜色应为红色。 使用此解决方案,未应用红色,但文本装饰效果很好。 这是一个小提琴版
如果我在 a 级别上设置颜色比它效果好(小提琴)或根本不设置颜色(小提琴),但我需要为标题和正文部分设置不同的颜色。
我还尝试为每个元素设置悬停伪(小提琴演示),但装饰对所有元素都起作用很丑陋,但颜色仅在我将鼠标悬停在确切元素上时才应用。 我想实现第二个版本,但使用像第一个版本一样的自定义颜色。
谢谢你的帮助。
编辑:我忘记解释一个图标也在 h3 标签中,这就是为什么在 span 标签中的标题。
如果您尝试为锚元素中包含的所有元素着色,这应该可行
#sub-menu a:hover *{
color: red;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.