css:hover状态改变另一个元素样式的使用
效果演示
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状态改变另一个元素样式的使用的更多相关文章
- 在一个元素上:hover，改变另一个元素的css属性
如果二者是父子关系,可以写成这种: .face:hover .eye-bottom { margin-top: 30px; } 如果是兄弟关系: .face:hover+.ear-wrap { tra ...
- css控制一个元素点击后， 改变另外一个元素的状态
1.点击后改变子元素.myclass:active span{ color:#00f;} 此方式在ios下不生效,chrome下正常 2.改变下一个兄弟元素.myclass:active +span ...
- 【笔记】css hover 伪类控制其他元素
最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...
- css进阶 04-如何让一个元素水平垂直居中？
04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
- css hover对其包含的元素进行样式设置
<ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)& ...
- css hover对其包括的元素进行样式设置
<ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)& ...
- 关于form表单:hover没有修改表单子元素样式
原来在写todolist的时候遇到的一个问题 是关于form表单的hover属性设置背景颜色 想要实现的效果如下: 但是一开始直接给form加hover选择器的时候是这样: 可以看到这样子直接加会使得 ...
- 用CSS的方法如何让一个元素不可见？（面试题目）
面试中看到这个问题,自己想的不全面,下面整理下,一起学习: 一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应 ...
- CSS一个元素同时使用多个类选择器（class selector）
CSS类选择器参考手册 一个元素同时使用多个类选择器 CSS中类选择器用点号表示.实际项目中一个div元素为了能被多个样式表匹配到(样式复用),通常div的class中由好几段组成,如<div ...
随机推荐
- c++ 读入和写入文件
读入 #include<ifstream> ifstream infile; infile.open(img_dir); while(getline(infile,tmp)){ } 写入 ...
- B4260 Codechef REBXOR
真是6块钱cpu(笑 爆炸入口 踹树练习(汗 对于二进制异或和弹性,我们可以贪心的来做. 瓶颈在于快速贪心. 我们可以维护一个trie树,储存异或前缀和.每次在trie树上贪心的跑. 正向and反向跑 ...
- 共变导数（Covariant Derivative）
原文链接 导数是指某一点的导数表示了某点上指定函数的变化率. 比如,要确定某物体的速度在某时刻的加速度,就取时间轴上下一时刻的一个微小增量,然后考察速度的增量和时间增量的比值.如果这个比值比较大,说明 ...
- IBM区块链总经理谈区块链
IBM区块链总经理谈区块链:3.4年前IBM的区块链人员就达到了1500人 Captain Hiro 2018-03-20 16:22 发布在 区块链 3 18349 CCN的记者Eric Eiss ...
- Excle 常用函数
1. 查找函数VLOOKUP 使用示例: =VLOOKUP(A1,$C$1:$D$19,2,0) 表示以A1单元格为基准,匹配C1开始到D19的范围数据,在公式行显示D单元格文本,也就是匹配范围的第二 ...
- 基于asp.net MVC 的服务器和客户端的交互(一)
架构思想 三层架构 提出了一种基于ASP．NET开发方式的三层架构的Web应用系统构造思想.其基本内容是:将面向对象的UML建模与Web应用系统开发 相结合,将整个系统分成适合ASP.NET开发方式的 ...
- mysql中列属性
mysql列属性包括:NULL .default.comment.primary key.unique key 一.NULL定义方式:NULL(默认) NOT NULL 空属性有2个值,mysql数据 ...
- kafka单机环境搭建及其基本使用
最近在搞kettle整合kafka producer插件,于是自己搭建了一套单机的kafka环境,以便用于测试.现整理如下的笔记,发上来和大家分享.后续还会有kafka的研究笔记,依然会与大家分享! ...
- Python代码结构——顺序、分支、循环
## 顺序结构 - 按照从上到下的顺序,一条语句一条语句的执行,是最基本的结构 ## 分支结构 if condition: statement statement ... elif condition ...
- Python变量、赋值及作用域
## 变量 - 指向唯一内存地址的一个名字 - 目的是为了更方便地引用内存中的值 - 可以使用id(变量)函数来查看变量的唯一id值,若两者id值相同,则表示两个变量指向同一地址,两个变量的值完全相同 ...