两个伪类&过渡效果一起运用的奇妙现象

两个伪类&过渡效果一起运用的奇妙现象

开发工具与关键技术：Adobe Dreamweaver CC 2017  前端

作者：刘剑鸿

撰写时间：2019年1月27日星期日

在学习前端网页技术开发，个人觉得最有趣的莫过于CSS动画了，它能实现javascript的一些功能。如：hover伪类，hover选择器用于选择鼠标指针浮动在上面的元素，并设置其样式。从它的定义上看是要鼠标指针移到元素上面，才会触发设置的样式。但在某些方面，不一定要鼠标移到相关的元素上才能触发其样式。如下看截图

当鼠标任意移入红色的框就会触发两个伪类效果
1小黄人图片变圆 2下面弹出黄色背景的“I’m coming”

效果如下图：

当鼠标任意接触到红框，都会触发两个伪类的效果。要想实现在效果，必须设置两个伪类hover。

其代码如下图：

要两个伪类连用页面才会实现这有趣的效果，而且写的格式也与以往写hover格式用所不同。在box1 img的类里面设置transition: 1s;并非多余，在伪类里面设置过渡时间，是为了让伪类生成有个柔和的动态效果。而在box1 img里再设置transition: 1s;是为了当鼠标移出红色的框框时，原来的img 生成也有柔和的动态效果。使样式没那么生硬。

                                                              新手  请多多指教