Javascript 使用当前类的setInterval切换类（此）

我有两个有阴影的盒子。我希望阴影在悬停时脉动。下面的代码可以工作，但当我悬停其中任何一个阴影时，显然会使所有阴影都跳动。我曾尝试在setInterval函数中使用

此

，以便仅在单个框上应用脉冲效果–但这会将代码全部打断。我该怎么办

$( ".pulse_label_shadow" ).hover(function() {
    setInterval(function() {
       $( '.pulse_label_shadow' ).toggleClass("pulse_label_shadow_hover");
    }, 450);
  }
);

或者更好和/或更简单，如何在使用以下命令时添加setInterval：

$( ".pulse_label_shadow" ).hover(function() {
    $( this ).toggleClass("pulse_label_shadow_hover");
}, function() {
    $( this ).removeClass( "pulse_label_shadow_hover" );
   }
);

css看起来是这样的，如果这有什么不同的话：

.pulse_label_shadow{
    -webkit-box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
    -moz-box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
    box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5);
    transition: all 0.8s ease;
}
.pulse_label_shadow_hover{
    -webkit-box-shadow: 0px 0px 95px 1px rgba(0,255,255,0.5);
    -moz-box-shadow: 0px 0px 95px 1px rgba(0,255,255,0.5);
    box-shadow: 0px 0px 95px 1px rgba(0,255,255,0.5);
}

和HTML（对于其中一个框）：

标题

---

编辑：感谢您用不同的方法给出了许多很棒的答案。一旦我对答案进行了更多的测试，我将选择一个答案。

您将立即选择所有的

。pulse\u label\u shadow

，而不是绑定

悬停

回调每个答案。尝试使用，请看我的小提琴：

编辑 对不起，我误解了你的问题，我已经解决了，看看我的小提琴：

---

设置间隔，并在删除时使用

clearInterval（）

将其清除

var区间；
$（“.pulse\u label\u shadow”）.hover（函数（事件）{
console.log（'bsang'）；
间隔=设置间隔（函数（）{
$（event.target）。最近（“.pulse\u label\u shadow”）。切换类（“pulse\u label\u shadow\u hover”）；
}, 450);
}，功能（事件）{
间隔时间；
$（event.target）。最近（“.pulse\u label\u shadow”）。removeClass（“pulse\u label\u shadow\u hover”）；
});
.pulse\u label\u shadow{
-网络工具包盒阴影：0px 0px 35px 1px rgba（255255255,0.5）；
-moz盒阴影：0px 0px 35px 1px rgba（255255,0.5）；
盒影：0px 0px 35px 1px rgba（255255,0.5）；
过渡：所有0.8秒缓解；
}
.脉冲\标签\阴影\悬停{
-网络工具包盒阴影：0px 0px 95px 1px rgba（255,0,0,0.5）；
-moz盒阴影：0px 0px 95px 1px rgba（255,0,0,0.5）；
盒影：0px 0px 95px 1px rgba（255,0,0,0.5）；
}

标题

因此，这应该按照描述添加和删除类，我认为您的问题是“脉冲”，您需要重复运行转换。为此，我们应该使用带有“动画迭代计数：无限”的动画

@keyframes pulse {
    0% {  
        box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5); 
    }
    100% {  
        box-shadow: 0px 0px 95px 1px rgba(255, 0, 0 ,0.5); 
    }
}


.pulse_label_shadow_hover{ 
    animation: pulse 5s infinite; 
}

一个没有jQuery做悬停的例子
你能添加所需的HTML吗？@RejithRKrishnan当然，我已经编辑了我的原始帖子。就我所见，似乎不起作用，如果有帮助的话，我已经添加了HTML。@Lenny抱歉，我发布了错误的修订版。现在修复了SyntaxError，修复后我也无法让它工作。我也将html添加到了原始帖子中。@Lenny查看更新的答案。更改阴影颜色以获得更高的可见性。效果完美，非常感谢！我以前从未使用过“.closest”，因此感谢您向我介绍此功能。当然！我应该想到的。。。工作完美，可能是最简单（阅读：最有效）的一个我现在使用。
$( ".pulse_label_shadow" ).hover(function() {
    $( this ).addClass("pulse_label_shadow_hover");
}, function() {
    $( this ).removeClass( "pulse_label_shadow_hover" );
   }
);

@keyframes pulse {
    0% {  
        box-shadow: 0px 0px 35px 1px rgba(255,255,255,0.5); 
    }
    100% {  
        box-shadow: 0px 0px 95px 1px rgba(255, 0, 0 ,0.5); 
    }
}


.pulse_label_shadow_hover{ 
    animation: pulse 5s infinite; 
}