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

  .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. mapreduce类型对应

    public class OrderBean implements WritableComparable<OrderBean> { private Integer order_id; // ...

  2. Apache Ranger 编译安装部署

    1. 概述 Apache Ranger是大数据领域的一个集中式安全管理框架,目的是通过制定策略(policies)实现对Hadoop组件的集中式安全管理.用户可以通过Ranger实现对集群中数据的安全 ...

  3. Hadoop原生对象存储Ozone

    Hadoop 社区推出了新一代分布式Key-value对象存储系统 Ozone,同时提供对象和文件访问的接口,从构架上解决了长久以来困扰HDFS的小文件问题.本文作为Ozone系列文章的第一篇,抛个砖 ...

  4. 使用PostgreSQL 脚本导出数据库的DDL

    使用PostgreSQL 脚本导出数据库的DDL 本文主要介绍如何使用基于 PostgreSQL pgdump编写的自定义脚本来导出数据库的DDL. 一.文件说明: 1.pgdump基础语句.sql: ...

  5. laravel中{{}}和{!! !!}的区别详解

    {{}}支持转义 一段html代码只是被当成普通的字符串输出 {!! !!} 不支持转义 一段html代码可以被正常的解析 public function html(){ $address=" ...

  6. 制作自己的rpm包,并为其制作patch包。

    本文分为两个部分,第一部分是制作一个简单的自己的rpm包,并安装运行它.第二部分是为其制作一个patch包,并通过spec配置文件去打补丁,安装.运行打补丁后的程序. 一.安装工具 [yh@local ...

  7. 华为交换机配置ACL详细步骤

    ACL 介绍 #2000-2999普通ACL,根据源IP过滤 #3000-3999高级ACL,根据源目的端口和源目的地址等过滤 #4000-4999二层ACL,根据源目的MAC等过滤 配置举例: 拒绝 ...

  8. JavaScript的事件循环机制浅析

    前言 JavaScript是一门单线程的弱类型语言,但是我们在开发中,经常会遇到一些需要异步或者等待的处理操作. 类似ajax,亦或者ES6中新增的promise操作用于处理一些回调函数等. 概念 在 ...

  9. 采用 DIV+CSS 布局网页练习

    实验四:采用 DIV+CSS 布局网页练习 实验目的: 熟悉 DIV+CSS 布局网页的方法 实验要求: 1.制作一个完整网页和一个 css 文件: 2.在网页中采用 DIV+CSS 布局 4 个以上 ...

  10. 《前端运维》一、Linux基础--04Shell变量

    这一篇文章,我们就要开始学习正式的Shell语言部分的内容.那在开始之前,我们回忆一下,javascript语言,大体都包含了哪些内容?比如数据类型(对象.字符串.数值),数据结构(对象.数组).运算 ...