hover属性

hover

1、hover的定义

:hover 选择器用于选择鼠标指针浮动在上面的元素，它适用于所有元素

:hover 选择器适用于所有元素

2、hover的用法

用法一：鼠标悬浮在元素上改变元素样式

#div1{
width: 500px;
height: 500px;
background: red;
}
#div1:hover{
background: black;
}

用法2：通过hover控制其他块的样式

（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>

<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">