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

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

如果是兄弟关系:

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

如果是兄弟的儿子:

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

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

在一个元素上:hover,改变另一个元素的css属性的更多相关文章

  1. css控制一个元素点击后, 改变另外一个元素的状态

    1.点击后改变子元素.myclass:active span{ color:#00f;} 此方式在ios下不生效,chrome下正常  2.改变下一个兄弟元素.myclass:active +span ...

  2. css:hover状态改变另一个元素样式的使用

    效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...

  3. CSS hover 改变另外一个元素状态

    Part.1 问题 我们写页面时也不少遇到这个问题,在没有使用任何预处理语言前提下,当hover 一个元素的时候怎么改变其它的元素? 这里我把它分为两种情况(除自身以外) hover时 1: 改变本身 ...

  4. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  5. 一个可以查询CSS属性兼容性的网站。

    平时遇到CSS属性是不是道理具体兼容哪些网站,就可以直接上这个网站查询啦.http://www.caniuse.com/ 这个是网站地址.  例如查询 inline-block属性兼容性 就可以看到 ...

  6. hover 改变另一个标签的属性

  7. jquery创建元素并添加到另一个元素中

    $('<tr>').data('code', code)        .append(            // 方法            $('<td>').appen ...

  8. 【Chrome控制台】获取元素上绑定的事件信息以及监控事件

    需求场景 在前端开发中,偶尔需要验证下某个元素上到底绑定了哪些事件,以及监控某个元素上的事件触发情况. 解决方案 普通操作 之前面对这种情况,一般采取的措施就是在各个事件里写console.info, ...

  9. Chrome调试 ---- 控制台获取元素上绑定的事件信息以及监控事件

    需求场景 在前端开发中,偶尔需要验证下某个元素上到底绑定了哪些事件,以及监控某个元素上的事件触发情况. 解决方案 普通操作 之前面对这种情况,一般采取的措施就是在各个事件里写console.info, ...

随机推荐

  1. ImageNet2017文件介绍及使用

    ImageNet2017文件介绍及使用 文件说明 imagenet_object_localization.tar.gz包含训练集和验证集的图像数据和地面实况,以及测试集的图像数据. 图像注释以PAS ...

  2. 系统整理qt笔记3

    qtcreator中不能输入中文: https://blog.csdn.net/qq_15725099/article/details/97305507 main.cpp #include " ...

  3. ibv_get_device_list()函数

    struct ibv_device** ibv_get_device_list(int *num_devices); 描述 函数用来返回一个当前可用的RDMA设备数组. 注意 数组以NULL结尾: R ...

  4. laravel 使用Redis

    1.非框架中使用redis实例? 就是new出redis对象然后连接,然后键值操作即可 <?php $redis = new redis(); $redis->connect('127.0 ...

  5. 0x02 TeamViewer日志溯源

    1.环境部署 1.安装ubuntu_x64的deb安装包 2.打开TeamViewer 2.日志目录 1.通过图形应用找到日志文件 2.通过命令定位日志文件 find / -name "Te ...

  6. 【elasticsearch】搜索过程详解

    elasticsearch 搜索过程详解 本文基于elasticsearch8.1.在es搜索中,经常会使用索引+星号,采用时间戳来进行搜索,比如aaaa-*在es中是怎么处理这类请求的呢?是对匹配的 ...

  7. Java案例——统计字符串中各种字符出现的次数

    /*案例:统计各种字符在字符串中出现的次数 分析:只考虑三种字符类型的情况下(大写字母,小写字母,数字) 1.使用Scanner 类获取字符串数据 2.遍历字符串得到每一个字符 3.判断每一个字符是那 ...

  8. docker-compose + nginx部署前后端分离的项目

    安装docker 安装必要的系统工具 # 更新yum工具 yum update -y # 安装必要的工具 yum install -y yum-utils device-mapper-persiste ...

  9. 浅析DES原理

    对称密码体制 对称密码体制:一种加密系统.其加密密钥和解密密钥是相同的,或者能够从其中之一推知另一个.对称密码体制根据对明文加密方式不同分为分组密码和流密码. 分组密码 分组密码按照一定长度(如64b ...

  10. 使用docker配置laravel5.5环境

    简介 简述一下我用docker来配置laravel环境 软件镜像 php:7.2-rc-fpm-alpine mysql:5.6 nginx:1.12.2-alpine 配置环境 Ubuntu:16. ...