Question

我确定这很容易，但我被困住了。我一直玩这个JSFiddle一段时间，但无法弄清楚如何将点击更改为悬停或鼠标进入/退出触发器。我已尝试将其他问题建议应用于类似问题，但我只能为每次鼠标悬停进行一次字体更改。我是以正确的方式进行这种方式，还是有更简单的方法来实现这一目标？

我对此的理解是＆＃34;点击＆＃34;触发器每1.5秒设置一次，我不能这样做，因为它每次点击都会关闭我网站上的扩展导航栏。我的目标是让字体旋转，但仅限于悬停在某个id或类上。我注意到很多类似的问题已停止或清除间隔...提前感谢您的任何信息。

HTML

<div id="container">
    <div id="change" class="one"></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Josefin+Slab|Quattrocento|Sacramento|Give+You+Glory|Poiret+One|Khand|Permanent+Marker|ABeeZee|Ubuntu|Questrial);

#change {
  font-size:2em;
  text-align:center;
  color:#636466;
}
#change:before{
    content:'Change during hover, stop when mouse leaves';
}
.one:before    {
  font-family:'Questrial';
}
.two:before    {

  font-family:'Give You Glory';
}
.three:before  {

  font-family:'Khand';
}
.four:before   {

  font-family:'Josefin Slab';
}
.five:before   {
  font-family:'Sacramento';
}
.six:before    {

  font-family:'ABeeZee';
}
.seven:before  {
  font-family:'Permanent Marker';
}
.eight:before  {
  font-family:'Ubuntu';
}
.nine:before   {
  font-family:'Poiret One';
}

JS

setInterval(function() {

   var e = $.Event("click");

    $('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine').trigger('click');
}, 1500);

$('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine').click(function() {
    this.className = {
        three : 'four',
        four  : 'five',
        five  : 'six',
        six   : 'seven',
        seven : 'eight',
        eight : 'nine',
        nine  : 'one',
        one   : 'two',
        two   : 'three'
    }[this.className];
});

//clearInterval(function() {?

Answer 1

您需要分配setInterval的结果，该结果是对该计时器的引用：

var intervalId = setInterval(function() {

   var e = $.Event("click");

    $('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine').trigger('click');
}, 1500);

clearInterval(intervalId):

在MDN上有一些很好的例子说明如何使用它。

更改定时＆＃39;点击＆＃39; for setInterval to mouseenter / exit

1 个答案: