html - :hover style on div with an image that doesnt trigger

Question

我一直在尝试用纯css在一个网站上做一个overlay hover的效果

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

Answer 1

你可以看这里。也许此解决方案会对您有所帮助。

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>