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 ...
随机推荐
- CodeForces 506D Mr. Kitayuta's Colorful Graph
brute force ? 其实是平方分解.很容易想到的是每一个颜色建一个图,然后并查集维护一下连通性. 问题在于颜色有O(m)种,每种颜色的图点数都是O(n)的,因此并查集的空间只能重复利用. 但是 ...
- 使用MongoDB 2.6 C++驱动中的连接池
.post p{text-indent: 2em;} MongoDB2.6的CXX驱动(mongo-cxx-driver-26compat),内置包含了数据库连接池,方便管理数据库连接,但是官方文档说 ...
- SpringMVC3中返回json字符串时500 Internal Server Error的处理方案
搭建 Spring3+MyBatis+Rest+BootStrap+JBPM项目环境后,测试发现了一个操蛋的问题.使用Spring MVC的自动类型转换为JSON时,后台数据List/Map获取完全正 ...
- data-ng-hide指令用于隐藏或显示HTML元素
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 1.Spring Cloud初相识--------简单项目搭建
开发工具:STS 代码下载链接:GitHub管理项目 前言: Springcloud 算是当前比较火的技术,一套微服务架构的技术. 我个人对微服务的理解为: 服务可以代表service,微服务就是小的 ...
- 如何将一个div水平垂直居中
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- 在线代码编辑器 Codemirror 的轻量级 React 组件
代码编辑器 CodeMirror 的轻量级 React 组件 demo @uiw-react.github.io/react-codemirror/ 特性:
- 设置vim tab为4个空格
Vim 编辑器默认tab为8个空格,但对于pythoner来说,必须要调整到4个空格. 方法如下: 在~/.vimrc文件中加入下面设置: set ts=4 #设置tabstop为4个空格 set e ...
- 使用Git将本地项目上传到码云
01.码云上创建一个项目 testgit (名字随意) 02.进入本地想要上传的目录,然后使用git bash 03.cd到想要上传的目录 04.$ git init 初始化一个git 本地仓库(项目 ...
- windows和linux上mysql的安装
mysql基于多平台,多版本的安装 mysql.tar.gz 链接:https://pan.baidu.com/s/1lG9BNL1mG4qbjM8xLHtrjQ 密码:s4tk MySQL 是一个 ...