Question

#box {
  animation: scroll 2s linear infinite;
  width: 100px;
  height: 100px;
  background: red;
}

#box:hover {
  background: green;
}

@keyframes scroll {
  from {transform: none;}
  to {transform: translateX(400px);}
}

<div id="box"></div>

如果将鼠标悬停在该框上，则此后如果您不移动鼠标，它将保持绿色。如果将鼠标放在其路径中并且不移动，则不会触发悬停。

在这种情况下，有没有一种方法可以在不移动鼠标的情况下触发悬停？

编辑：不使用JavaScript。

Answer 1

我知道您不需要JavaScript解决方案。但是，我不确定没有它是否有解决方案。当鼠标不执行任何操作时，您无法触发鼠标事件。

同时，我添加了一个使用javascript的解决方案，因为它可以帮助其他人使用javascript解决方案来寻找答案并着手解决这个问题。

鼠标移动时的最后一个坐标存储为变量x和y。可以随时使用Element.getBoundingClientRect()找到框的坐标。可以将查看鼠标指针是否位于框中的功能设置为以任何选定的间隔运行。这将根据具体情况进行调整。

唯一的问题是，打开此页面时鼠标根本没有移动。

var x = 0;
var y = 0;
var box = document.querySelector("#box");
document.onmousemove = function(e){
    x = e.pageX;
    y = e.pageY;
}
setInterval(findMouse, 50);
function findMouse(){
    // Looking for the updated coordinates of the box
    var movingBox = box.getBoundingClientRect();

    if( x>=movingBox.left && x<=movingBox.right
            && y>=movingBox.top && y<=movingBox.bottom)
        document.getElementById("box").style.backgroundColor = "green";
    else
        document.getElementById("box").style.backgroundColor = "red";

}

#box {
	animation: scroll 2s linear infinite;
	width: 100px;
	height: 100px;
	background: red;
}

#box:hover {
	background: green;
}

@keyframes scroll {
	from {transform: none;}
	to {transform: translateX(400px);}
}

<div id="box"></div>

触发：将鼠标悬停在移动元素上而不移动鼠标

1 个答案: