移动 div 后更新鼠标与 div 的交互

Question

在我正在构建的网站中，我有一个带有 :hover 动画的按钮，当您单击该按钮时，页面上的很多内容（包括按钮）都会移动。我的问题是，即使按钮从鼠标下方移出，它也不会更新并失去其：悬停效果，直到您再次移动鼠标。

这是一个示例 - 一旦您单击按钮，它就会保持浅蓝色（悬停颜色），直到您再次移动鼠标。

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 代码中，则无需用户移动鼠标即可更新元素的状态。