javascript - CSS :hover effect no longer works when javascript onscroll event is triggered

Question

在 javascript 中，我有 onscroll 事件，它根据 window.pageYOffset 移动 div 元素。在 css 中，我有一个 :hover 应用 transform: scale();

当页面加载时，css 效果起作用。但是，一旦开始滚动并应用 onscroll 事件，移动的 div 将不再响应悬停效果。没有滚动事件的 div 仍然有 css 效果。知道是什么导致了冲突吗？ https://jsfiddle.net/kshatriiya/b2jxg3ep/1/

<div id="container">
  <div class="box" id="one"></div>
  <div class="box" id="two"></div>
  <div class="box" id="three"></div>
  <div class="box" id="four"></div>
  <div class="box" id="five"></div> 
</div>

<div id="scroll-container">
  <div class="box move" data-offset="12" id="six"></div>
  <div class="box move" data-offset="14" id="seven"></div>
  <div class="box move" data-offset="16" id="eight"></div>
  <div class="box move" data-offset="18" id="nine"></div>
  <div class="box move" data-offset="20" id="ten"></div>  
</div> 

JS

var boxes = document.getElementsByClassName("box");
var movingBoxes = document.getElementsByClassName("move");
var boxArray = [];

(function() {
for (var i = 0; i < boxes.length; i++) {
var r = Math.floor((Math.random() * 254) + 1);
boxes[i].style.background = "rgba(" + r + "," + i*30 + "," + i*45 + ", 1)";
}
})();

var boxItem = function(el, speed) {
this.el = el;
this.speed = speed;
this.startOffset = this.speed*10;
};

boxItem.prototype.update = function(Yoff) {

var spd = (Yoff)/(this.speed/(this.startOffset/10));
var distanceRemain = this.startOffset-spd;
if (distanceRemain < 0) {distanceRemain = 0};
this.el.style.transform = "translateY(" + distanceRemain + "px)";

}

function prepareArrays() { 
for (i = 0; i < movingBoxes.length; i++) {
boxArray.push(new boxItem(movingBoxes[i], movingBoxes[i].getAttribute("data-offset")));
};
}

prepareArrays();


window.onscroll = function() {
var Yoffset = this.pageYOffset;

boxArray.forEach(function(el){

el.update(Yoffset);

});
}

CSS

#container {
  width: 100vw;
  height: 200px;
  display: flex;
  flex-diretion: row;  
}

.box {  
 margin: 0;
 padding: 0;
 width: 20%;
 height: 100px;
 -webkit-transition: width 1s ease-out, transform 3s ease;
 -moz-transition: width 1s ease-out, transform 3s ease;
 -ms-transition: width 1s ease-out, transform 3s ease;
 -o-transition: width 1s ease-out, transform 3s ease;
 transition: width 1s ease-out, transform 3s ease;
 background: red;
}

.box:hover {
transform: scale(1.1, 1.1);
}

#scroll-container {

 width: 100%;
 height: 1000px;
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 align-content: flex-start;
}

Answer 1

很明显，您要覆盖同一元素上的同一 CSS 引用。

尝试将 CSS .box:hover 转换中的 !important 放入，这样就可以了