当触发javascript onscroll事件时，css：hover效果不再起作用

Question

in javascript I have onscroll event that moves the div elements depending on window.pageYOffset. In the css I have a :hover that applies transform: scale();

When the page loads, the css effect works. However, as soon as you start scrolling and the onscroll event is applied, the divs that moves no longer respond to the hover effect. The divs that don't have scroll event still have the css effect. Any idea what is causing the conflict? 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

您通过javascript应用的转换会覆盖悬停时的转换，因为通过js应用的样式是内联样式

Answer 2

It's pretty obvious, you're overriding the same CSS reference on the same element.

Try putting !important , from the CSS .box:hover transform, that will do the trick