hover属性
hover
1、hover的定义
:hover 选择器用于选择鼠标指针浮动在上面的元素，它适用于所有元素
:hover 选择器适用于所有元素
2、hover的用法
用法一：鼠标悬浮在元素上改变元素样式
#div1{
width: 500px;
height: 500px;
background: red;
}
#div1:hover{
background: black;
}
（1）控制子元素的样式 : ‘>’ 控制子元素
(2) 控制后代元素的样式 : ‘ ’ 控制后代元素
（3）控制兄弟元素的样式 : ‘+’ 控制同级元素（兄弟元素）
（4）控制就近元素的样式 : ‘～’ 控制就近元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 500px;
height: 500px;
background: red;
}
#div1:hover{
background: black;
}
#div2{
width: 300px;
height: 300px;
background: pink;
}
#div1:hover>#div2{
background: yellow;
}/*父子*/
#div3{
width: 100px;
height: 100px;
background: mediumpurple;
}
#div1:hover #div3{
background: #00b38a;
}/*后代*/
#div4{
width: 400px;
height: 400px;
background: orange;
}
#div1:hover+#div4{
background: dodgerblue;
}/*兄弟*/
#div1:hover~#div4{
background: darkslategray;
}/*所有弟弟*/
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"> </div>
</div>
<!-- <span>如果用加号（+）4必须是1紧邻着的下一个弟弟，哥哥不行</span>-->
<div id="div4"></div>
</div>
</body>
</html>
3、应用实例
百度图片搜索图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#camera{
width: 48px;
height: 48px;
border: 2px solid red;
margin: 100px auto 0;
background: url("https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-2x-6258e1cf13.png");
backgroud-size: 24px 96px;
background-position-y: -96px;
}
#camera:hover{
background-position-y: -144px;
}
</style>
</head>
<body>
<div id="camera">
</div>
</body>
</html>
浙公网安备 33010602011771号