How to animate box border dotted on hover?

Question

I need to animate the border on hover.

Initially the box border will be hidden, once we hover the box, that time that border dotted will animate one by one fast.

  .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

Try to use the JS event mouseover . Create a css class that does what you want, and on that event add/remove the class.

First, let's add an id to your div.

Then, this is how the event should look like:

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

Now, you want to remove that border from the div when the "hover is over" so we need to remove the class on mouseleave event:

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

This is a quick, raw version of the code. You can polish it and make it better.

Answer 2

You can do it with only pseudoelements and :hover in CSS:

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

You can see the results here.

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

Hope it helps you.