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 ...
随机推荐
- 【[USACO17DEC]Standing Out from the Herd】
题目 不会广义\(SAM\)啊 但信仰插入特殊字符就可以搞定一切了 我们先把所有的串搞在一起建出一个\(SAM\),记得在中间插入特殊字符 对于\(parent\)树上的一个节点,只有当其\(endp ...
- 2017.11.11 详谈application、session、request和page的作用范围
今天在图书馆遇到了问题 不知道怎么选择session还是request Web应用中的JSP和servlet都是由web服务器来调用,Jsp和Servlet之间通常不会相互调用,那么Jsp和Servl ...
- matlab中padarray函数在numpy、python中的实现
a = np.arange(6) a = a.reshape((2, 3)) print np.lib.pad(a, 1, 'symmetric') 运行结果: [[ ] [ ] [ ] [ ]]
- tarjan+topsort
题目 缩完点后统计入读为零的点就可以来. 因为缩完点后肯定是DAG #include<iostream> #include<cstdio> #include<algori ...
- 谷歌浏览器兼容IE插件
谷歌浏览器兼容IE插件 http://pan.baidu.com/s/1i31hspf
- Java8函数之旅 （二） --Java8中的流
流与集合 众所周知,日常开发与操作中涉及到集合的操作相当频繁,而java中对于集合的操作又是相当麻烦.这里你可能就有疑问了,我感觉平常开发的时候操作集合时不麻烦呀?那下面我们从一个例子说起. 计 ...
- Siamese Network
摘抄自caffe github的issue697 Siamese nets are supervised models for metric learning [1]. [1] S. Chopra, ...
- computed--实时计算属性
项目:https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/07-shoppingCart.md 实时计算属性的compu ...
- REST Adapter实现SAP PI中的增强XML/JSON格式转换(转载)
SAP标准的REST adapter有着XML/JSON转换的功能,它很有用,因为一方面SAP PI/PO内部以XML格式处理数据,而另一方面,在处理REST架构风格的时候,JSON才是事实上的格式. ...
- udp发送广播消息
import socket if __name__ == '__main__': # 创建udpsocket udp_socket = socket.socket(socket.AF_INET, so ...