效果演示

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

.box {
width: 150px;
height: 150px;
background-color: #069;
line-height: 150px;
text-align: center;
margin: 20px 0;
color: #FFF;
}

.change {

  font-size: 20px;

  color: #0cf;

}

/* 情景一：两个是兄弟元素 */

.box:hover+.change {

  color: red;

}

/* 情景二：两个是父子元素 */

.box:hover .change {

  color: red;

}

/* 情景二：两个是兄弟元素,改变的是一个兄弟元素的子元素 */

.box:hover+#c>.change {

  color: red;

}

/* 情景一：两个是兄弟元素 */

兄弟元素

/* 情景二：两个是父子元素 */

父元素的子元素

/* 情景二：两个是兄弟元素,改变的是一个兄弟元素的子元素 */

兄弟元素的子元素

附加代码:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>css:hover状态改变另一个元素样式的使用</title>

  <style>

    .box {

      width: 150px;

      height: 150px;

      background-color: #069;

      line-height: 150px;

      text-align: center;

      margin: 20px 0;

      color: #FFF;

    }

    .change {

      font-size: 20px;

      color: #0cf;

    }

    /* 情景一：两个是兄弟元素 */

    .box:hover+.change {

      color: red;

    }

    /* 情景二：两个是父子元素 */

    .box:hover .change {

      color: red;

    }

    /* 情景二：两个是兄弟元素,改变的是一个兄弟元素的子元素 */

    .box:hover+#c>.change {

      color: red;

    }

  </style>

</head>

<body>

  <!--  情景一：两个是兄弟元素  -->

  <div class="box"></div>

  <div class="change">兄弟元素</div>

  <!--  情景二：两个是父子元素  -->

  <div class="box">

    <span class="change">父元素的子元素</span>

  </div>

  <!--  情景二：两个是兄弟元素,改变的是一个兄弟元素的子元素  -->

  <div class="box"></div>

  <div id='c'>

    <div class="change">兄弟元素的子元素</div>

  </div>

</body>

</html>

css:hover状态改变另一个元素样式的使用的更多相关文章

  1. 在一个元素上:hover，改变另一个元素的css属性

    如果二者是父子关系,可以写成这种: .face:hover .eye-bottom { margin-top: 30px; } 如果是兄弟关系: .face:hover+.ear-wrap { tra ...

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

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

  3. 【笔记】css hover 伪类控制其他元素

    最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...

  4. css进阶 04-如何让一个元素水平垂直居中？

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

  5. css hover对其包含的元素进行样式设置

    <ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)& ...

  6. css hover对其包括的元素进行样式设置

    <ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)& ...

  7. 关于form表单:hover没有修改表单子元素样式

    原来在写todolist的时候遇到的一个问题 是关于form表单的hover属性设置背景颜色 想要实现的效果如下: 但是一开始直接给form加hover选择器的时候是这样: 可以看到这样子直接加会使得 ...

  8. 用CSS的方法如何让一个元素不可见？（面试题目）

    面试中看到这个问题,自己想的不全面,下面整理下,一起学习: 一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应 ...

  9. CSS一个元素同时使用多个类选择器（class selector）

    CSS类选择器参考手册 一个元素同时使用多个类选择器 CSS中类选择器用点号表示.实际项目中一个div元素为了能被多个样式表匹配到(样式复用),通常div的class中由好几段组成,如<div ...

随机推荐

  1. linux命令之awk命令

    awk是一种编程语言,用于在linux/unix下对文本和数据进行处理.数据可以来自标准输入(stdin).一个或多个文件,或其它命令的输出.它支持用户自定义函数和动态正则表达式等先进功能,是linu ...

  2. 【洛谷P1962】斐波那契数列

    斐波那契数列 题目链接:https://www.luogu.org/problemnew/show/P1962 矩阵A 1,1 1,0 用A^k即可求出feb(k). 矩阵快速幂 #include&l ...

  3. 移动页面请使用CSS3动画

    说到动画,我们一般会使用jQuery 中的animate(); 在PC浏览器中,是很方便的,由于PC的高性能,这种不断修改DOM的做法确实不会出现太大的问题,但是在手机端就不同了. 手机上使用jQue ...

  4. img适配问题解决方法

    将img放到background中,将background-size设置为100%:只需要适配背景为img的元素的宽和高即可.

  5. 数据库可视化工具简介以及pymysql的使用

    1.可视化工具Navicat 我们自己开发测试时,可以使用该可视化工具,以图形界面的形式操作数据库 在生产环境中,为了显示自己的逼格,一般不建议使用它 官网下载:https://www.navicat ...

  6. JSON 与 XML 的比较 - iOS

    在与 web 服务进行数据交换的时候,通常支持两种主要的数据格式(即:JavaScript 对象表示法 JSON 与可扩展标记语言 XML),两者在可读性上都不分高下,接下来对此进行简单的总结和分析, ...

  7. C#如何使用异步编程【BeginInvoke/EndInvoke】

    怎么使用异步,就是用委托进行处理,如果委托对象在调用列表中只有一个方法,它就可以异步执行这个方法.委托类有两个方法,叫做BeginInvoke和EndInvoke,它们是用来异步执行使用. 异步有三种 ...

  8. 关于 export default 和 export

    // 第一组 export default function crc32() { // 输出 // ... } import crc32 from 'crc32'; // 输入 // 第二组 expo ...

  9. 路由传参，path和query的刷新报错js文件丢失

    日常的路由跳转,基本都会用到传参,有两种方式:path + query, name + params 常用的写法: this.$router.push({ path: 'proDetail',quer ...

  10. Docker自学纪实(五) 使用Dockerfile构建php网站环境镜像

    一般呢,docker构建镜像容器的方式有两种:一种是pull dockerhub仓库里面的镜像,一种是使用Dockerfile自定义构建镜像. 很多时候,公司要求的镜像并不一定符合dockerhub仓 ...