详情页

css 兄弟姐妹褪色

时间:2023年10月07日

编辑:佚名

淡出悬停项的同级。
使用 a 对 所做的更改进行动画处理。 transitionopacity
使用 和 伪类选择器更改除鼠标所在的元素之外的所有元素。 :hover:notopacity0.5
<div class="sibling-fade">
  <span>Item 1</span> <span>Item 2</span> <span>Item 3</span>
  <span>Item 4</span> <span>Item 5</span> <span>Item 6</span>
</div>
span {
  padding: 0 16px;
  transition: opacity 0.3s;
}
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}
相关文章
猜你需要