如何在鼠标移开后保持稳定的悬停效果

Question

如何设置我的悬停效果即使在鼠标移开后也能保持稳定？？？代码工作正常但是在鼠标移出 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);

}

Answer 1

必须将转换置于正常状态。

#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);
}

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

编辑：确实，如果你想让它保持状态，我建议将#sme:hover 更改为 .hovered 并在悬停时将 js 中的 class 添加到你的 #sme 中。

Answer 2

当你 hover 像

这样的元素时，你必须使用动画并添加 class

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);
  }
}

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

Answer 3

我想你正在找这个

$(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>

Answer 4

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

#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);
  }
}

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

如何在鼠标移开后保持稳定的悬停效果

how to stable hover effect even after mouse out

html

css

jscript