html - Css 变换 : Scale Only Works in Dev Tools

Question

我正在尝试实现一个简单的 :hover 效果，其中悬停的图像在悬停时会放大。奇怪的是，当我在 Chrome 开发工具的“强制元素状态”中单击 :hover 单选按钮时，效果按预期工作，但当我实际将鼠标悬停在图像上时，没有骰子。任何见解将不胜感激!

这是我的标记(图像有一个半不透明的覆盖层)

<article class="news-loop_item">
  <img 
    src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-
    s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" class="news-
    loop_img" alt="featured image">
  <div class="news-loop_overlay">
    <h2 class="news-loop_title">Title</h2>
    <p class="news-loop_date">Date</p>
    <div class="news-loop_summary">Summary</div>
  </div>
</article>

还有我的 scss

.news-loop {
  flex-wrap: wrap;
  margin: -1rem;
}

.news-loop_item {
  flex-basis: calc(100% / 2 - 2rem);
  height: 20rem;
  margin: 1rem;
  overflow: hidden;
  position: relative;
}

.news-loop_img {
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  position: relative;
  vertical-align: middle;
  width: 100%;
}

.news-loop_img:hover {
  -webkit-transform: scale(1.15, 1.15);
  transform: scale(1.15, 1.15);
}

.news-loop_overlay {
  background: rgba(0, 0, 0, .75);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-transition: all .3s ease-in-out; 
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.news-loop_overlay:hover {
  background: rgba(0, 0, 0, .5);
}

https://codepen.io/evanhickman/pen/ZXOmWb

Answer 1

原因是您的悬停选择器错误，请查看:

.news-loop_item:hover .news-loop_img {
  -webkit-transform: scale(1.15, 1.15);
  transform: scale(1.15, 1.15);
}

查看父元素需要悬停事件。