ToB企服应用市场:ToB评测及商务社交产业平台

标题: 解决图片无法设置hover，以设置图片的阴影 [打印本页]

---

作者: 石小疯    时间: 2022-8-13 11:33
标题: 解决图片无法设置hover，以设置图片的阴影
模仿华为官网
这是几张图片浮动，但是无法通过img:hover设置鼠标放上去的阴影效果

图片无法设置hover的解决办法

1. img {
2.     width: 291px;
3.     height: 194px;
4.   }
5. img:hover {
6.         box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
7. }

复制代码

因为img元素是特殊的，属于可替换元素，即具备块级元素，行内元素，行内块元素的特点。所以box-shadow无法对它生效，最简单的就是用一个块级元素包裹它，然后设置块级元素的hover，即可。
所以我采用li元素包裹图片。

1.         <li ><img src="https://www.cnblogs.com/./images/1.webp" alt="1"></li>
2.         <li ><img src="https://www.cnblogs.com/./images/2.webp" alt="1"></li>
3.         <li ><img src="https://www.cnblogs.com/./images/3.webp" alt="1"></li>
4.         <li><img src="https://www.cnblogs.com/./images/4.webp" alt="1"></li>

复制代码

1. li {
2.     float: left;
3.   // 取消li的样式
4.     list-style: none;
5.   }
6.   .m_right {
7.     margin-right: 10px ;
8.   }
9.   li:hover {
10.     //        设置盒子阴影
11.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
12.   }

复制代码

最终效果



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4