Question

我正在尝试在图像上创建一个盒子沙漠但不知何故我无法创建一个。我正在使用:after伪元素来执行此操作：

HTML ::

<ul class="bxslider fade out">
    <li>
        <img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" />
    </li>
</ul>

CSS ::

  .bxslider {
      margin: 0;
      padding: 0;
  }
  .bxslider li {
      position: relative;
  }
  .bxslider li:after {
      width: 100%;
      height: 30px;
      ;
      position: absolute;
      top:100%;
      left: 0;
      -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
      box-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
  }
  .bxslider li img {
      width: 100%;
      max-width: 300px;
  }

FIDDLE HERE

现在是源代码，因为img不支持伪元素我将阴影添加到li元素，但我仍然看不到阴影，我不明白为什么？

有人可以解释一下吗？同样在FF的控制台中，不显示伪元素。

P.S。我使用伪元素的原因是因为box-shadow必须小于li宽度的100％，但是现在，并没有考虑到这一点。

Answer 1

尝试使用以下选择器.bxslider li img:hover为阴影添加CSS。

http://jsfiddle.net/cxy39rLg/1/

 .bxslider li img {
    width: 100%;
    max-width: 300px;
}
.bxslider li img:hover {
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

无法在li伪元素

1 个答案: