即使在鼠标移出后如何稳定悬停效果答案

【问题标题】：how to stable hover effect even after mouse out即使在鼠标移出后如何稳定悬停效果
【发布时间】：2017-07-05 06:29:09
【问题描述】：

即使在鼠标移出后如何设置我的悬停效果稳定？？？代码工作正常，但鼠标移出 div 元素后原始状态？？

html

<div id="sme"></div>

css

#sme{
    width: 400px;
    height: 400px;
    border: 20px solid #06c999;
/* Rotate */
}
#sme:hover{
transition: all 1.9s ease;
 -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);

}

【问题讨论】：

我认为你需要使用 jQuery 或 Javascript
如果您的意图是在初始悬停事件之后保持这种状态，您可能需要考虑使用 javascript 添加具有这些状态更改值的类，而不是将它们绑定到 css @987654323 @ 状态。如果您只需要暂时的延迟，在将元素返回到其初始状态之前，您可以在一个简短的 setTimeout 函数之后再次删除该类。

标签： html css jscript

【解决方案1】：

需要考虑的是使用动画播放状态。然而，副作用是当您在动画尚未完成时移开鼠标，动画将暂停。

#sme {
  width: 400px;
  height: 400px;
  border: 20px solid #06c999;
  animation: rotatebox 2s ease forwards;
  animation-play-state: paused;
}

#sme:hover {
  animation-play-state: running;
}

@keyframes rotatebox {
  100% {
    transform: rotate(180deg);
  }
}

&lt;div id="sme"&gt;A&lt;/div&gt;

【讨论】：

【解决方案2】：

Transition 必须置于正常状态。

#sme {
  width: 400px;
  height: 400px;
  border: 20px solid #06c999;
  transition: all 1.9s ease;
}

#sme:hover {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

&lt;div id="sme"&gt;&lt;/div&gt;

编辑：确实，如果您希望它保持状态，我建议将 #sme:hover 更改为 .hovered 并在您将其悬停时将 js 中的此类添加到您的 #sme。

【讨论】：

【解决方案3】：

hover元素喜欢时必须使用动画和添加类

function hasClass(element, cls) {
  return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

document.getElementById('sme').addEventListener('mouseover', function() {
  if (!hasClass(this, 'animated')) {
    this.className = 'animated';
  }
});

#sme {
  width: 400px;
  height: 400px;
  border: 20px solid #06c999;
  transition-property: transform;
  transition-duration: 1.9s;
}

#sme:hover,
.animated {
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

&lt;div id="sme"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

我想你正在寻找这个

$(function(){
    $('#sme').on('mouseenter', function(){
	$(this).addClass('hoverd');
    });
});

#sme {
  width: 400px;
  height: 400px;
  border: 20px solid #06c999;
  transition: all 1.9s ease;
}

.hoverd {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

<div id="sme"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

【讨论】：