Как анимировать рамку рамки, наведенную на наведение?

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

Вы можете сделать это только с псевдоэлементами и: hover в 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;
}

Вы можете увидеть результаты здесь.

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

Надеюсь, это поможетвы.

Answer 2

Попробуйте использовать событие JS mouseover. Создайте класс CSS, который делает то, что вы хотите, и в этом случае добавьте / удалите класс.

Во-первых, давайте добавим id к вашему div.

Тогда вот как должно выглядеть событие:

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

Теперь вы хотите удалить эту границу из div, когда «hover is over», поэтому нам нужно удалить класс для события mouseleave:

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

Это быстрая, сырая версия кода. Вы можете отполировать и сделать его лучше.