常规同级在悬停时不起作用
常规同级在悬停时不起作用
提问于 2018-05-17 15:33:26
为什么一般兄弟不能在悬停模式下工作？我尝试了所有的方法，甚至尝试让它使用jQuery，但jQuery中的CSS我不知道如何使过渡持续时间
.filter h5,
.filter span {
color: #808391;
cursor: pointer;
}
.work div.current h5,
.work div.current span {
cursor: auto;
}
.filter h5:hover
.filter span:hover + h5,
.work div.current h5{
color: #fff;
}
/* general sibling here not work */
.filter span:hover,
.filter h5:hover ~ .et,
.work div.current span {
color: #ed4040;
}<div class="col-6 col-md-3">
<div class="current filter" filter=".brainstorming">
<span class="icon-genius et"></span>
<h5>Brainstorming</h5>
</div>
</div>
回答 2
Stack Overflow用户
发布于 2018-05-17 20:51:25
使用CSS通用同级选择器将以它之后的所有后续元素为目标，而不是它之前的元素为目标。
您可以尝试使用JQuery .siblings()，以便能够针对所有同级元素。然后使用.mouseenter和.mouseleave创建转换。
$( "h5" )
.mouseenter(function(){
$(this).siblings().css({
color: "#ed4040",
transition: "all 1s ease"
});
})
.mouseleave(function(){
$(this).siblings().css({
color: "black"
});
});.filter h5,
.filter span {
color: #808391;
cursor: pointer;
}
.work div.current h5,
.work div.current span {
cursor: auto;
}
.filter h5:hover
.filter span:hover + h5,
.work div.current h5{
color: #fff;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-6 col-md-3">
<div class="current filter" filter=".brainstorming">
<span class="icon-genius et">SPAN</span>
<h5>Brainstorming</h5>
</div>
</div>
Stack Overflow用户
发布于 2018-05-18 15:49:56
您可以尝试将鼠标悬停在父对象上，然后只选择要更改的类.et。
.filter h5,
.filter span {
color: #808391;
cursor: pointer;
}
.work div.current h5,
.work div.current span {
cursor: auto;
}
.filter h5:hover
.filter span:hover + h5,
.work div.current h5{
color: #fff;
}
/* general sibling here not work */
.filter:hover > span.et{
color: #ed4040;
transition: all .5s;
}<div class="col-6 col-md-3">
<div class="current filter" filter=".brainstorming">
<span class="icon-genius et">colorschange</span>
<h5>Brainstorming</h5>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50385784
复制相关文章
相似问题
腾讯云开发者
