Question

我试图实现一个简单的悬停效果：悬停时图像徘徊扩大。奇怪的是，当我点击＆＃34;强制元素状态＆＃34;中的：hover单选按钮时在Chrome开发工具中，效果按预期工作，但当我实际悬停在图像上时，没有骰子。任何见解都会非常感激！

这是我的标记（图像有半透明覆盖）

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

请参阅父元素需要悬停事件。

Answer 2

问题是因为您的.news-loop_overlay类div正在捕获＆＃39;悬停效应。

尝试向该div添加z-index: -1;，您就会看到该尺度有效。

Css Transform：Scale仅适用于Dev Tools

2 个答案: