资讯专栏INFORMATION COLUMN

在一个元素上:hover,改变另一个元素的css属性

pakolagij / 3091人阅读

摘要:如果二者是父子关系,可以写成这种如果是兄弟关系如果是兄弟的儿子是用的选择器来实现的。

如果二者是父子关系,可以写成这种:

  .face:hover .eye-bottom {
                    margin-top: 30px;
                }

如果是兄弟关系:

.face:hover+.ear-wrap {
                transform: rotate(-30deg);
            }
            

如果是兄弟的儿子:

 .face:hover+.ear-wrap .ear {
                transform: rotate(-30deg);
            }

是用css的选择器来实现的。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114145.html

相关文章

  • CSS transition delay简介与进阶应用

    摘要:用来定义元素两种状态之间的过渡。到目前为止,我们利用完全模拟了第一部分我们使用实现的功能,而且看上去更简洁。附上利用来实现该方案的代码用于参考。由于代码效果时好时坏,猜测可能与的容器相关。 背景 在日常的项目开发中,我们会很经常的遇见如下的需求: 在浏览器页面中,当鼠标移动到某个部分后,另一个部分在延迟若干时间后出现 在鼠标移除该区域后,另一部分也在延迟若干时间后消失 我相信这是一...

    e10101 评论0 收藏0
  • 关于CSS Transition,你需要知道

    摘要:在这片文章中,我将会专研的过渡中更加复杂的部分,从链式和事件到硬件加速和动画函数。只有当需要的时候,你才应该用硬件加速,并且完全不需要在每个元素上都使用它。此外,不同的浏览器用不同的硬件加速的库,这可能会造成跨浏览器问题。 CSS3的过渡属性,给web应用带来了简单优雅的动画,但是比起初次相见,他(transition)有许多细则。 在这片文章中,我将会专研CSS3的过渡(transi...

    Joyven 评论0 收藏0
  • 关于CSS Transition,你需要知道

    摘要:在这片文章中,我将会专研的过渡中更加复杂的部分,从链式和事件到硬件加速和动画函数。只有当需要的时候,你才应该用硬件加速,并且完全不需要在每个元素上都使用它。此外,不同的浏览器用不同的硬件加速的库,这可能会造成跨浏览器问题。 CSS3的过渡属性,给web应用带来了简单优雅的动画,但是比起初次相见,他(transition)有许多细则。 在这片文章中,我将会专研CSS3的过渡(transi...

    taowen 评论0 收藏0
  • 原生js练习题---第二课(

    摘要:百度输入法实现效果百度输入法主要是切换的判断条件,一开始我还用点击次数的奇偶性来判断,其实直接检查菜单有没有显示即可。简易年历实现效果简易年历和上一题差不多,只是这次把修改类名换成修改数据而已。 0x1百度输入法 实现效果:See the Pen 2-01百度输入法 主要是切换的判断条件,一开始我还用点击次数的奇偶性来判断-_-||,其实直接检查菜单有没有显示即可。检查的时候有个小t...

    CollinPeng 评论0 收藏0
  • CSS笔记 :hover改变一个元素样式

    摘要:写在前面近日,在做项目的时候遇到一个需求鼠标悬停在元素时,改变元素样式显然,是要用到来写,但应用的场景有点小讲究,分为两种情形。如有帮助,望不吝赐赞一枚,多谢,如有错误还望不吝指出。 写在前面 近日,在做项目的时候遇到一个需求: 鼠标悬停在A元素时,改变B元素样式 显然,是要用到:hover来写,但应用的场景有点小讲究,分为两种情形。 情景1:A元素是B元素的父级 //情景1 ...

    Xufc 评论0 收藏0

发表评论

0条评论

pakolagij

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<