html - :hover样式在div上具有不会触发的图像

我一直在尝试在具有纯CSS的网站上进行覆盖悬停效果

                       <div class="col-md-4 port-show">
                            <img class="img-responsive" alt="" src="">
                            <h2 class=""></h2>
                            <ul>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>

但是，当我将鼠标悬停在叠加层不会触发的img上时，我遇到了问题。我知道我必须做不同的事情，但是现在不知道该怎么做。
CSS：

:hover:after{
        content: "";
        z-index: 10;
        display: block;
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        background: red;
        border-radius: 6px;
        border-color: transparent;
    }

最佳答案

你可以看这里也许此解决方案将对您有所帮助。
http://codepen.io/anon/pen/VKmxZw

.img-holder {
  position: relative;
  z-index: 1;
  display: block;
  width: 350px;
}
.img-holder img {
  display: block;
  width: 100%;
}
.img-holder:after {
  content: " ";
  width: 100%;
  height: 100%;
  background-color: red;
  z-index: 2;
  left: 0;
  top: 0;
  position: absolute;
  opacity: 0;
}
.img-holder:hover:after {
  opacity: 1;
}

<div class="col-md-4 port-show">
  <span class="img-holder">
    <img src="http://placehold.it/350x150" />
  </span>
  <h2 class=""></h2>
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>

关于html - :hover样式在div上具有不会触发的图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39610278/