javascript - 单击时禁用鼠标悬停

Question

我有一个在悬停时翻转的框。你可以在这里查看。 http://rehabhousedeals.com/shortcode/

我在框另一侧的右上角添加了红色图标。 我想当用户点击这个图标框时应该翻转回来。 实际上这是针对移动 View 的。用户应该能够通过单击此图标在正面向后翻转。 这是我的 CSS 中具有悬停效果的容器类。

.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{
    -webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
 -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}


.card-container.static:hover .card,
.card-container.static.hover .card {
    -webkit-transform: none;
-moz-transform: none;
 -o-transform: none;
    transform: none;
}

请帮我得到这个。

Answer 1

如果我正确理解您的问题，我可能会有解决方案。我不确定这是否可以单独在 css 中完成，但在 JavaScript 中，您可以简单地在悬停时添加一个类并在单击图标时将其删除

像这样

 box.addEventListener('mouseenter', function() {
   this.classList.add('boxHover');
 });

点击图标时删除

icon.addEventListener('click', function() {
  box.classList.remove('boxHover');
});

这是一个例子 https://jsfiddle.net/vqk8Ld46/