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

  .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. PyTorch深度学习实践-Overview

    Overview 1.PyTorch简介 ​ PyTorch是一个基于Torch的Python开源机器学习库,用于自然语言处理等应用程序.它主要由Facebookd的人工智能小组开发,不仅能够 实现强 ...

  2. Go切片全解析

    Go切片全解析 目录结构: 数组 切片 底层结构 创建 普通声明 make方式 截取 边界问题 追加 拓展表达式 扩容机制 切片传递的坑 切片的拷贝 浅拷贝 深拷贝 数组 var n [4]int f ...

  3. SQL Server--插入一天数据返回ID值

    这里将该功能写成了一个存储过程, 本来只写Insert的话,返回1,即影响的行数,该数据没太大应用意义. 想在Insert的基础上,返回新添加的这条数据的ID,两种方法: 1 .添加第17行的Sele ...

  4. selenium+python安装

    整理了下selenium+python环境搭建,搭建了很多次但每次都还是手忙脚乱,今天用心整理下 selenium 是用于测试 Web 应用程序用户界面 (UI) 的常用框架,并且 Selenium ...

  5. 国产化之银河麒麟安装.NetCore-包管理器方式

    背景 某个项目需要实现基础软件全部国产化,其中操作系统指定银河麒麟,数据库使用达梦V8,CPU平台的范围包括x64.龙芯.飞腾.鲲鹏等. 考虑到这些基础产品对.NETCore的支持,最终选择了3.1版 ...

  6. 2022年官网下安装GIT最全版与官网查阅方法

    目录 安装部署Git 1.百度搜索git,双击进入. 2.进入主页,双击如图位置. 3.进入下载列表,双击下载. 4.找到本地文件位置,双击安装,弹出界面,选择next 5.进入安装路径位置,修改路径 ...

  7. 基于idea做java程序的本地k8s调试-skaffold(一)

    先介绍下本篇文章是基于ideas下开发微服务的场景,大家都知道微服务嘛,一个个微的服务...很多,先不谈调试,要跑起来都费力,可能的原因有: 环境变量的配置,如果多个项目穿插着来,env变量可能废了, ...

  8. linux中mariadb用navicat远程连接

    在Linux中创建数据库并且远程图形化工具连接 安装数据库 [root@node1 ~]# yum install mariadb-server -y #这里我使用的mariadb 其他数据库也可以 ...

  9. CAS 比较并交换

    简介 CAS 的全称为 Compare-And-Swap,他是一条 CPU 并发源语. 他的功能是判断内存某个位置的值是否为预期值,如果是则更改为新的值,这个过程是原子的. CAS 并发原语体现在 J ...

  10. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...