CSS通用兄弟选择器hover状态失效问题求助

嘿，我来帮你搞定这个问题！首先来说说你的CSS核心问题——通用兄弟选择器（~）的使用规则搞反啦！这个选择器只能选中当前元素之后出现的同级兄弟元素，完全没法选中它前面的元素，这就是你设置的样式不生效的关键原因。

先看你的HTML结构：

<div class="current filter" filter=".brainstorming">
  <span class="icon-genius et"></span>
  <h5>Brainstorming</h5>
</div>

.et span在h5的前面，所以你写的.filter h5:hover ~ .et根本选不到前面的span。另外你那行.filter h5:hover .filter span:hover + h5的写法也有问题，两个选择器嵌套在一起是错误的，应该拆成独立的规则。

修正后的CSS代码 #

我帮你调整了规则，现在hover效果应该能正常工作了：

/* 基础样式，加上过渡让颜色变化更平滑 */
.filter h5, .filter span {
  color: #808391;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* 当前状态的样式 */
.work div.current h5, .work div.current span {
  cursor: auto;
}

/* hover时的文字颜色变化 */
/* span hover时，选中紧挨着的h5（相邻兄弟选择器+更精准） */
.filter span:hover + h5,
.work div.current h5 {
  color: #fff;
}

.filter span:hover,
.filter h5:hover {
  color: #ed4040;
}

/* 如果需要hover h5时，前面的span也变色，只能借助父元素的hover： */
.filter:hover span,
.filter:hover h5 {
  color: #ed4040;
}

解释一下：

• 因为span在h5前面，h5 hover时没法通过兄弟选择器选中span，如果你需要hover h5时span也变色，只能用父元素.filter的hover状态来同时控制两个子元素。
• 相邻兄弟选择器+在这里更适合，因为span和h5是紧挨着的，span:hover + h5可以精准选中span后面的h5。

关于jQuery设置过渡时长的两种方法 #

如果你还是想用jQuery实现，有两种简单方式：

1. 直接设置CSS过渡属性：和CSS里的写法一致，用css()方法给元素添加transition规则：

// 给.filter下的h5和span设置0.3秒的颜色过渡
$('.filter h5, .filter span').css('transition', 'color 0.3s ease');

// 绑定hover事件
$('.filter span').hover(function() {
  $(this).next('h5').css('color', '#fff');
  $(this).css('color', '#ed4040');
}, function() {
  // 鼠标移出时恢复原颜色
  $(this).next('h5').css('color', '#808391');
  $(this).css('color', '#808391');
});

2. 用jQuery的animate()方法：这个方法本身就支持设置动画时长，不需要额外的transition：

$('.filter span').hover(function() {
  $(this).animate({ color: '#ed4040' }, 300); // 300毫秒就是0.3秒
  $(this).next('h5').animate({ color: '#fff' }, 300);
}, function() {
  $(this).animate({ color: '#808391' }, 300);
  $(this).next('h5').animate({ color: '#808391' }, 300);
});

注意：如果用animate()控制颜色，需要确保jQuery包含了颜色动画模块，或者引入jQuery UI，不然默认的jQuery可能不支持颜色属性的动画效果。

内容的提问来源于stack exchange，提问作者muhammad seleman