Question

我需要在悬停时为边界设置动画。

最初，盒子的边框将被隐藏，一旦我们将鼠标悬停在盒子上，那点缀的边框就会快速地动画一遍。

 .arrow{
    height: 172px;
        right: 12px;
        width: 140px;
        border-right: 2px dotted #2fb89a;
        border-bottom: 2px dotted #2fb89a;
        top: 5px;
    }

<div class="arrow"></div>

Answer 1

尝试使用JS事件mouseover。创建一个可以执行所需操作的CSS类，并在该事件中添加/删除该类。

首先，让我们为您的div添加一个ID。

然后，事件显示如下：

document.getElementById("arrow").addEventListener("mouseover", function(event){
   event.target.classList.add("mystyle");
});

现在，您想在“悬停结束”时从div中删除该边框，因此我们需要在mouseleave事件中删除该类：

document.getElementById("arrow").addEventListener("mouseleave", function(event){
   event.target.classList.remove("mystyle");
});

这是代码的快速原始版本。您可以对其进行抛光并使其更好。

Answer 2

您只能在CSS中使用伪元素和：hover做到这一点：

 .arrow{
    position:relative;
    height: 172px;
    right: 12px;
    width: 140px;
    top: 5px;
    }

.arrow::after,
.arrow::before{
    position: absolute;
    content: '';
    display: block;
    transition: all 2s;
    bottom: 0;
    left: 100%;      
}

.arrow::after{
    border-bottom: 2px dotted #2fb89a;
    width: 0;
}

.arrow::before{
    border-right: 2px dotted #2fb89a;
    height: 0;
    top: 100%;
    transform: rotateX(180deg);  
}

.arrow:hover::after{
    width: 100%;
    left: 0;
}

.arrow:hover::before{
    height: 100%;
    top: 0;
}

您可以在此处查看结果。

https://codepen.io/ChemaAlfonso/pen/LvpKMV

希望它对您有帮助。

如何为悬停在虚线上的框边框设置动画？

2 个答案: