解决图片无法设置hover，以设置图片的阴影

模仿华为官网
这是几张图片浮动，但是无法通过img:hover设置鼠标放上去的阴影效果

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

img {
    width: 291px;
    height: 194px;
  }
img:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

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

所以我采用li元素包裹图片。

<div class="container">
        <li class="m_right"><img src="./images/1.webp" alt="1"></li>
        <li class="m_right"><img src="./images/2.webp" alt="1"></li>
        <li class="m_right"><img src="./images/3.webp" alt="1"></li>
        <li><img src="./images/4.webp" alt="1"></li>
</div>

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);
  }

最终效果