CSS中hover改变其他元素样式

<!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改变其他元素样式相关推荐

css hover, focus 状态改变其他元素样式
A:hover { 改变 B 的样式 }, 这样效果就不需要用到javascript. 这个就是css选择器的使用情况了,假设悬浮元素是a,样式改变元素是b,俩个元素之间的关系就是b是a的子元素就可以 ...
html中加hover啥意思,css中hover是什么意思
css中:hover是一个伪类选择器,:hover伪类选择器在鼠标移到元素上时向此元素添加特殊的样式.:hover选择器适用于所有元素. 要使用css对HTML页面中的元素实现一对一,一对多或者多对一 ...
Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...
CSS中定义多个链接样式,在CSS中定义【导航栏】超链接样式
1.案例css代码 .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标悬停黑色 */ .divcs ...
如何用js改变伪元素样式
通常设置伪元素的样式直接用CSS很方便 .test:after{content:'';display:block;width:100%;height:100%;background:red; } 可是 ...
css4个伪元素,CSS_CSS3中的content属性使用示例，CSS中主要的伪元素有四个：befo - phpStudy...
CSS3中的content属性使用示例 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个conte ...
关于hover改变其他元素
A元素:hover 鼠标悬停在A元素时,改变A元素样式 A元素:hover B元素鼠标悬停在A元素时,改变A元素的子元素B的样式 A元素:hover + B元素鼠标悬停在A元素时,改变与A相 ...
JavaScript文档对象模型document对象改变Html元素样式属性(5)
1. document对象改变Html元素样式属性行内样式操作案例如下: <!DOCTYPE html> <html><head><meta charset ...
css中如何设置hr的样式？css hr标签多种样式（图文）
在对html网页进行美化的时候,肯定少不了要用的hr标签进行修饰页面,但默认的hr标签样式对页面的修饰起不到什么好的作用,有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作.那么如 ...

CSS中hover改变其他元素样式

CSS中hover改变其他元素样式相关推荐

最新文章

热门文章