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

Question

在我正在构建的网站中，我有一个带有 :hover 动画的按钮，当您单击该按钮时，页面上的很多内容（包括该按钮）都会四处移动。我的问题是，即使按钮从鼠标下方移出后，它也不会更新并失去其 :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 代码中，则无需用户移动鼠标即可更新元素的状态。

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

Update mouse interaction with div after moving it

html

javascript

css

mouse

jquery