javascript - 如何使元素的边框闪烁？

Question

我想在用户将鼠标悬停在某个元素上时闪烁或闪烁特定 div 的边框，并在鼠标移开时停止闪烁。我有几个元素可以用户鼠标悬停。每次用户鼠标悬停时，我都需要刷新 div。

我试过了。

#DivToolTip{ border: 3px solid white; }
#DivToolTip.red-border { border: 3px solid red; }

var flashInterval;

flashInterval = setInterval(function() { // called at mouseover
    $('#DivToolTip').toggleClass('red-border');
}, 1000);


window.clearInterval(flashInterval); // called at mouseout

但它没有正确闪烁，当我将鼠标悬停在另一个元素上时，它会在 1 秒后第一次正确闪烁，它会快速或更快地闪烁。

非常感谢任何帮助

Answer 1

You can do this in pure CSS

从而通过为您的样式保留 CSS

来保持关注点分离

HTML

<div class='borderBlink'>Border flash on hover</div>

CSS

@-webkit-keyframes borderBlink {    
    from, to {    
        border-color: transparent    
    }    
    50% {    
        border-color: black    
    }    
}    
@keyframes borderBlink {    
    from, to {    
        border-color: transparent    
    }    
    50% {    
        border-color: black    
    }    
}    
.borderBlink{    
    border:1px solid black;
    /* add 'border-color: transparent' if you wish no border to show initially */  
}
.borderBlink:hover {    
    -webkit-animation: borderBlink 1s step-end infinite;    
    animation: borderBlink 1s step-end infinite;    
}