html hover作用另外一个对象,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;

}

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

兄弟元素

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

父元素的子元素

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

兄弟元素的子元素

附加代码:

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;

}

兄弟元素

父元素的子元素

兄弟元素的子元素

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对其包含的元素进行样式设置