Question

我正试图在悬停时将颜色叠加应用于我的图像。我正在尝试的当前方法是使用:: after在用户盘旋时插入背景颜色。

HTML

<div class="box-link">
    <a href="#" class="box-links-link">
       <div class="box-link-image">
           <img src="http://roctownlive.com/wp-content/uploads/2017/08/shutterstock_199262555-waterglass-1000x636.jpg" alt="Flowers">
       </div>
       <div class="box-link-content">
           <h2>Heading</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis pretium dolor, sed tincidunt sem egestas sit amet. Sed pretium purus sed orci pharetra, sit amet egestas neque sodales.</p>
       </div>
     </a>
 </div>

CSS

box-link-image::after {
    display: block;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    background: rgba(42,47,50,.6);
    z-index: 100;
    opacity: 0;
    -webkit-transition: .35s , font-size 0s;
    transition: .35s , font-size 0s;
}

.box-link a:hover .box-link-image::after, .box-link a:focus .box-link-image::after, .box-link a.tap-focus .box-link-image::after {
    opacity: 1;
}

目前，当您将鼠标悬停在图像上时，背景颜色会延伸到文本所在的下方div，如何使其停止在图像结束的位置？这是一个正确的方法吗？

完整的Codepen示例：https://codepen.io/anon/pen/GOwYGL

Answer 1

要将绝对定位的::after伪元素限制在其父div中，您也应该定位父元素。
请注意，我使图像变小了，这样您就可以在不需要滚动的情况下看到效果。

＆＃13;

.box-link-image {  /* new */
  position: relative;
}

.box-link-image::after {
  display: block;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  background: rgba(42, 47, 50, .6);
  z-index: 100;
  opacity: 0;
  -webkit-transition: .35s, font-size 0s;
  transition: .35s, font-size 0s;
}

.box-link a:hover .box-link-image::after,
.box-link a:focus .box-link-image::after,
.box-link a.tap-focus .box-link-image::after {
  opacity: 1;
}

＆＃13;

<div class="box-link">
  <a href="#" class="box-links-link">
    <div class="box-link-image">
      <img src="http://roctownlive.com/wp-content/uploads/2017/08/shutterstock_199262555-waterglass-1000x636.jpg"
          style="height:150px" alt="Flowers">
    </div>
    <div class="box-link-content">
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis pretium dolor, sed tincidunt sem egestas sit amet. Sed pretium purus sed orci pharetra, sit amet egestas neque sodales.</p>
    </div>
  </a>
</div>

＆＃13;

编辑：或者，如果您想要的是仅突出显示图像而不是容器div，则应将div缩小为与图像相同的大小。

＆＃13;

.box-link-image {  /* new */
  position: relative;
  display:inline-block;
}
.box-link-image img {
  vertical-align:top; /* to get rid of the descender space */
}

.box-link-image::after {
  display: block;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  background: rgba(42, 47, 50, .6);
  z-index: 100;
  opacity: 0;
  -webkit-transition: .35s, font-size 0s;
  transition: .35s, font-size 0s;
}

.box-link a:hover .box-link-image::after,
.box-link a:focus .box-link-image::after,
.box-link a.tap-focus .box-link-image::after {
  opacity: 1;
}

＆＃13;

<div class="box-link">
  <a href="#" class="box-links-link">
    <div class="box-link-image">
      <img src="http://roctownlive.com/wp-content/uploads/2017/08/shutterstock_199262555-waterglass-1000x636.jpg"
          style="height:150px" alt="Flowers">
    </div>
    <div class="box-link-content">
      <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis pretium dolor, sed tincidunt sem egestas sit amet. Sed pretium purus sed orci pharetra, sit amet egestas neque sodales.</p>
    </div>
  </a>
</div>

＆＃13;

::在背景颜色高度调整后：悬停

1 个答案: