解决图片无法设置hover，以设置图片的阴影
模仿华为官网这是几张图片浮动，但是无法通过img:hover设置鼠标放上去的阴影效果
https://img2022.cnblogs.com/blog/2006720/202206/2006720-20220626001400119-897934635.png
图片无法设置hover的解决办法
img {
width: 291px;
height: 194px;
}
img:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}因为img元素是特殊的，属于可替换元素，即具备块级元素，行内元素，行内块元素的特点。所以box-shadow无法对它生效，最简单的就是用一个块级元素包裹它，然后设置块级元素的hover，即可。
所以我采用li元素包裹图片。
<li ><img src="https://www.cnblogs.com/./images/1.webp" alt="1"></li>
<li ><img src="https://www.cnblogs.com/./images/2.webp" alt="1"></li>
<li ><img src="https://www.cnblogs.com/./images/3.webp" alt="1"></li>
<li><img src="https://www.cnblogs.com/./images/4.webp" alt="1"></li>li {
float: left;
// 取消li的样式
list-style: none;
}
.m_right {
margin-right: 10px ;
}
li:hover {
// 设置盒子阴影
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}最终效果
https://img2022.cnblogs.com/blog/2006720/202206/2006720-20220626002727816-113442695.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]