Question

此代码在txt上方悬停时效果很好。晃动看起来很酷。但它只会在慢慢移动鼠标时发生，如果鼠标稳定，则悬停的样式会占用。

即使鼠标稳定，也有任何方法可以保持摇摆（或快速切换，缺少单词），使用CSS3可能至少是悬停风格和非悬停风格的5倍。我知道JS有可能，但是想知道CSS方法，虽然小JS不会受伤。

HTML

<div id="intro"><h1>Lorem Ipsum<br>dolor</h1></div>

CSS

#intro {
      font-family: 'Pacifico', cursive;
      color: #fff;
      text-align: center;}

#intro:hover {
      font-family: 'Lobster', cursive;}

http://jsfiddle.net/h9306qq5/

- UPDATE

或者就此而言，当悬停时，对于设定的间隔或数字，转换为非悬停样式和悬停样式的效果。

Answer 1

你可以通过简单地用jquery来实现你的目标。它应该是这样的：

$('#intro').on('hover', function() {
  var that = $(this);
  that.css('font-family', "'Pacifico', cursive;");
}, function() {
  var that = $(this);
  setTimeout(function() { 
    that.css('font-family', "'Lobster', cursive;");
  }, 500);
});

您可以通过调整超时时间来增加切换之间的时间。

这是一个没有包含字体的小提琴，以使其正常工作：JSFiddle

CSS悬停状态 - 循环效果

1 个答案: