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

Answer 2

不需要为此使用jQuery，只需使用CSS animations and keyframes即可轻松完成：

首先，设置关键帧以将边框设置为50％的时间：

@keyframes blink { 
   50% { border-color: #ff0000; } 
}

然后设置div（您可以使用ID，类或任何元素）来使用动画：

.class:hover {
    animation: blink .5s step-end infinite alternate;
}

设置透明边框开始：

.class {
    border: 10px solid transparent;
}

Fiddle

Answer 3

尝试：

var flashInterval;

$('#DivToolTip').hover(
    function () {
    flashInterval = setInterval(function () {
        $('#DivToolTip').toggleClass('red-border');
    }, 1000);
}, function () {
    clearInterval(flashInterval);
    $('#DivToolTip').removeClass('red-border');
});

DEMO

<强>更新

如果你想悬停在一个元素上而另一个元素闪烁，那么你应该根据你想要执行每个动作的元素的id来改变你的jQuery选择器。

查看更新的DEMO

Answer 4

CSS：

[class*="fI_"]{
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
}
.fI_bg *:not(.btn),.fI_bo *:not(.btn){color:#fff}
.fI_bg{
    animation-name:fI_bg;
}
.fI_bo{
    animation-name:fI_bo;
}
@keyframes fI_bg{
0%{background-color:#0D78BD;}25%{background-color:#1C3B50;}50%{background-color:#0D78BD;}75%{background-color:#1C3B50;}100%{background-color:#0D78BD;}
}
@keyframes fI_bo{
0%{border-color:#0D78BD;}25%{border-color:#1C3B50;}50%{border-color:#0D78BD;}75%{border-color:#1C3B50;}100%{border-color:#0D78BD;}
}

jQuery替代方案：

$.fn.fI=function(e){//Flash Item
    if(!e){e={}}
    if(this){e.e=this}
    switch(e.f){
        case 0:
        break;
        default:
            switch(e.css){
                case 0:
                    e.d='background-color'
                break;
                case undefined:
                    e.d='border-color'
                break;
                default:
                    e.d=e.css
                break;
            }
            if(!e.c1){e.c1='#1D89CF'}
            if(!e.c2){e.c2='#1aae88'}
            if(!e.p){e.p=200}
            e.e.css(e.d,e.c1)
            setTimeout(function(){
                e.e.css(e.d,e.c2)
                setTimeout(function(){
                    e.e.css(e.d,e.c1)
                    setTimeout(function(){
                        e.e.css(e.d,e.c2)
                        setTimeout(function(){
                            e.e.css(e.d,'')
                        },e.p)
                    },e.p)
                },e.p)
            },e.p)
        break;
    }
    return this
}

像这样使用：

如果你离开css undefined，

会有边框

$('#elementid').fI()

如果你做0它会做背景颜色，其他任何东西都将成为属性。所以你可以像这样做字体颜色或盒子阴影：

$('#elementid').fI({css:'color'})
$('#elementid').fI({css:'box-shadow',c1:'0 0 10px #333',c2:'0 0 5px #F00'})

做背景

$('#elementid').fI({css:0})

使用不同的颜色并以毫秒为单位设置间隔

$('#elementid').fI({c1:'#fff',c2:'#F00',p:1000})

Answer 5

我有简单的Javascript版本

<script type="text/javascript">
var flash;

function flashBorder(elmId, stopFlash)
{
    var elm = document.getElementById(elmId);  
    if(stopFlash == "true")
    {
        elm.style.border = "";
        clearInterval(flash);
    }
    else
    {
        var borderPattern = false;
        flash = setInterval(setBorder,300);

        function setBorder()
        {
            if(borderPattern)
            {
                borderPattern = false;
                elm.style.border = "solid white";
                elm.style.borderWidth = "3px";
            }
            else
            {
                borderPattern = true;
                elm.style.border = "solid blue";
                elm.style.borderWidth = "3px";
            }
        }
    }
}
</script>

<div id="FLASH_ME" onmouseenter="flashBorder('FLASH_ME', 'false')" onmouseleave="flashBorder('FLASH_ME', 'true')">Hello Friends!</div>

如何使元素的边框闪烁？

5 个答案:

You can do this in pure CSS