Fading out siblings on hover in CSS

原文连接：
https://www.trysmudford.com/blog/fade-out-siblings-css-trick/

要实现下面这样的效果：

通常，会把hover事件加在card1,card2,card3上，但是通过加在父元素上也可以实现。

初始代码如下：

 <style>.parent {display: flex;height: 20vh;justify-content: space-around;align-items: center;background-color: #a6c0fe;}.parent button {background-color: #fff;width: 20vw;height: 20vw;border: none;}
</style><article class="parent"><button>Card 1</button><button>Card 2</button><button>Card 3</button>
</article>

然后加上hover的代码如下：

    .parent:hover > button {opacity: 0.5;}.parent:hover > button:hover {transform: scale(1.1);opacity: 1;}

这样的话，基本效果都出来了，可以看到如下的效果，

这样没啥大问题，但是有点儿不理想：鼠标放到两个card中间的时候也会触发，希望去掉，

   .parent {pointer-events: none;}.parent > button {pointer-events: auto;}

pointer-events: none; 告诉浏览器，鼠标悬浮在parent的时候，忽略鼠标事件，但是只有这样还不行，因为里面的button也hover不生效了。所以对里面的button再加上pointer-events: auto;

Fading out siblings on hover in CSS相关推荐

html hover 效果,CSS八种让人眼前一亮的HOVER效果的示例代码
一.发送效果HTML // 这里是一个svg的占位 Send CSS #send-btn{ display: flex; align-items: center; justify-content: c ...
html中hover的作用,hover在css中的作用是什么
hover在css中的作用是什么发布时间:2020-12-07 10:26:29 来源:亿速云阅读:143 作者:小新这篇文章给大家分享的是有关hover在css中的作用是什么的内容.小编觉得挺 ...
html css hover事件,css – 防止在父Div上触发Div的Hover事件？
根据定义,将鼠标悬停在孩子身上,也会悬停在父母身上. html事件中没有"阻塞". 有两个方法链,泡沫和捕获. Any event taking place in the W3C ...
html5hover鼠标悬停,不使用hover外部CSS样式实现hover鼠标悬停改变样式
不能使用外部CSS样式实现hover鼠标悬停改变样式在DIV+CSS网页布局中,有时我们不能直接使用外部CSS样式控制DIV样式,比如对a设置a:hover样式. 可以使用onMouseOver(鼠 ...
移动端css hover效果,css移动端:acitve效果的实现
做移动前端也有一些日子了,一直有个问题没有解决,就是与pc端那样的一个:hover的效果,:hover是鼠标指针浮动在其上的元素的一个选择器,但因为在移动端是没有鼠标的,代替的是触摸屏,用户也不是有& ...
html精灵图的hover状态,css图片精灵图标怎么使用？
css精灵图(sprite)直译为"CSS精灵",也被称为通常被解释为"CSS图像拼合"."CSS贴图定位"或"CSS图片精灵&q ...
8种让人眼前一亮的hover效果--CSS
文章目录一.CSS是什么? 二.使用步骤一.发送效果二.霓虹效果三.边框效果四.圆形效果五.圆角效果六.冰冻效果七.闪亮效果八.加载效果总结一.CSS是什么? CSS 是用来编写 ...
css hover同级,CSS hover改变子标签/同级标签样式
.second { display: none; } .first:hover+.second, .second:hover { display: block; } /*第一个div hover时,改 ...
IE6不支持hover赋予css样式的解决方法如div:hover li:hover支持
转载,请注明文章出处和来源网址:http://www.divcss5.com/css-hack/c528.shtml 转载于:https://www.cnblogs.com/hFannie/p/442 ...

Fading out siblings on hover in CSS

Fading out siblings on hover in CSS相关推荐

最新文章

热门文章