一般兄弟姐妹在悬停时不起作用

Question

为什么一般兄弟姐妹不能悬停？我尝试各种方式，甚至尝试使用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>

Answer 1

使用CSS General Sibling Selector会将所有后续元素定位在它之后，并且无法在它之前定位元素。

您可以尝试使用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>

Answer 2

您可以尝试使用父级的悬停，只选择类.et进行更改。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;