jquery - CSS 悬停状态 - 循环效果

Question

将鼠标悬停在 txt 上时，此代码会产生不错的效果。颤抖看起来很酷。但这只会在缓慢移动鼠标时发生，如果鼠标稳定，则悬停样式会接管。

那么有没有什么方法可以在鼠标稳定时保持抖动(或快速切换，因为缺少文字)，可能至少是悬停样式和非悬停样式的 5 倍 b/w，使用 CSS3。我知道用 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/

--更新

或者就此而言，在悬停时将非悬停样式和悬停样式转换为黑白的效果，以设定的间隔或数字。

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

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

这是一个没有包含字体的 fiddle ，让它工作:JSFiddle