移动后用div更新鼠标交互

Question

在我正在构建的一个网站中，我有一个带有“悬停”动画的按钮，当您单击该按钮时，页面上的很多东西都会移动，包括按钮的移动。我的问题是，即使在按钮从鼠标下面移出后，它也不会更新和丢失它的:悬停效果，直到您再次移动鼠标。

这里有一个例子--一旦你点击按钮，它就会保持浅蓝色(悬停的颜色)，直到你再次移动鼠标。

​

function clicked() {
  if (document.getElementById('mydiv').style.transform == 'translateY(70px)') {
    document.getElementById('mydiv').style.transform = 'translateY(0px)';
  } else {
    document.getElementById('mydiv').style.transform = 'translateY(70px)';
  }
};

div {
  background-color: #fedcba;
  padding: 20px;
  display: inline-block;
}
div:hover {
  background-color: #abcdef;
}

<div id="mydiv" onclick="clicked();">Click me</div>

​

如何使元素更新而不需要用户再次移动鼠标？JQuery没事。

Answer 1

我认为用您当前的CSS方法，您将无法处理这一点。尝试另一种JavaScript方法：

​

const el = document.getElementById('mydiv');

el.addEventListener('click', () => {
  if(el.style.transform == 'translateY(50px)') {
    el.style.transform = 'translateY(0px)';
  } else {
    el.style.transform = 'translateY(50px)';
  }
  el.style.background = "#fedcba";
});

el.addEventListener('mouseover', () => {
  el.style.background = "#abcdef";
});

el.addEventListener('mouseout', () => {
  el.style.background = "#fedcba";
});

div {
  background: #fedcba;
  padding: 20px;
  display: inline-block;
}

<div id="mydiv">Click me</div>

​

如果您将“悬停”解压到JS代码中，那么您可以更新元素的状态，而无需移动鼠标。