CSS 多个 item hover 突出效果

上山打老虎了

发布于 2022-06-15 09:00:21

1.7K0

发布于 2022-06-15 09:00:21

文章被收录于专栏：Article

最近项目中有一个 Hover 的效果，当选中其中一个元素的时候高亮展示，其余的元素透明度 0.5，虽然使用 JS 的方案通过监听鼠标的移入移出来实现，但是实属多余。

由于 CSS 中还没有父节点选择器，所以当你 hover 一个元素的时候，你只能让其后面的同级元素发生样式改变，一个是 ～ 一个是 + ，其实还可以通过 :not 选择器来变相的实现。

HTML 结构：

<div class="container">
  <a href="#" class="item"></a>
  <a href="#" class="item"></a>
  <a href="#" class="item"></a>
  <a href="#" class="item"></a>
  <a href="#" class="item"></a>
</div>

状态定义：

未 Hover 时的状态
当有一个元素 Hover 时的状态
当一个元素被 Hover 后，剩余其他元素的状态

所以一共有三种状态。

1. 未 Hover 时的状态，通过父级来控制：

// initial default color
.container:not(:focus-within):not(:hover) {
  .item { 
    background: #2888ff;
    opacity: 1;
  }
}

2. 其中一个元素被 Hover，很简单，没有特殊逻辑。

.item :hover {
    background: #00c394;
    opacity: 1;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
    transform: scale(1.1);
    z-index: 1;
}

3. 当一个元素被 Hover 后，其他元素的状态，因为父级元素会跟随子元素被 Hover 后而失效，进而由子元素掌控样式。

.item {
  opacity: 0.5;
  background: #2888ff; // items default color
}

效果

See the Pen Untitled by hjoker (@hjoker) on CodePen.

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年04月07日，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度

CSS 多个 item hover 突出效果

CSS 多个 item hover 突出效果

HTML 结构：

状态定义：

效果

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐