css之hover的使用技巧
欧阳俊捷
发现问题：
想实现一个当鼠标放在图片上面时，显示面罩和文字的效果
实现过程：
如果是使用js的话用两个方法就可以了，但是想通过纯css的方式来实现一下，于是就对hover属性进行了尝试。但是很奇怪不起作用，明明单独使用hover的时候都是可以用的。
解决结果
- 鼠标移入元素，使用 " : hover " 可以改变元素自身的样式（产生新样式）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
width: 300px;
margin-top: 10px;
background: #ff0000;
}
ul li:hover{
background: #000000;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
- 当存在父子关系的时候，可以通过父级的 " : hover " 使得子级的样式发生改变，写法为 " .container:hover .content " ，hover后面有一个空格；但是！子级使用 " : hover " 是改变不了父级的样式的！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 300px;
height: 300px;
border: 1px solid #ff9f5a;
}
.content{
width: 100px;
height: 100px;
background: #27e7ff;
}
.container:hover .content{
background: #000000;
}
</style>
</head>
<body>
<p class="container">
<p class="content"></p>
</p>
</body>
</html>
- 当两个元素不是父子关系，为同胞关系时，通过 " .container:hover .content " 这样的写法是无效的，需要用过 " + " 号，即 " .container:hover + .content " 才能显示出效果！但是要注意两个元素的先后顺序哦！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 300px;
height: 300px;
border: 1px solid #ff9f5a;
}
.content{
width: 100px;
height: 100px;
background: #27e7ff;
}
.container:hover +.content{
background: #000000;
}
</style>
</head>
<body>
<p class="container"></p>
<p class="content"></p>
</body>
</html>
类似资料：