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

必须将过渡置于正常状态。

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：的确，如果你想让它保持状态，我建议你改变#sme：hover by .hovered并在你将鼠标悬停在你的#sme时将这个类添加到你的#sme中。

Answer 2

您必须使用动画并在hover元素

时添加一个类

＆＃13;

function hasClass(element, cls) {
  return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

document.getElementById('sme').addEventListener('mouseover', function() {
  if (!hasClass(this, 'animated')) {
    this.className = 'animated';
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何在鼠标移出后稳定悬停效果

4 个答案: