Применение плавного стиля на целевом элементе в Dragenter и Dragleave ⇐ CSS

[Anonymous]

Я хотел бы применить пунктирную границу вокруг моих целевых столбцов таблицы, когда перетаскиваемый элемент падает над столбцом на Dragenter , и удалить границу на Draglave .
Я могу успешно нацелиться и стилеть эти столбцы таблицы, однако существует эффект, когда граница быстро применяется/снят. Есть ли способ, которым я могу добавить в определенную проверку, чтобы сделать этот переход между столбцами более плавным и избегать этих слушателей/применения в стиле и удаления из выполнения излишне?
Drop item




Cell-1
Cell-2


Cell-3
Cell-4



< /code>
const tds = document.querySelectorAll("[data-column-number]")

for (let td of tds) {
td.addEventListener("dragenter", (event) => {
let colNum = td.dataset.columnNumber
let cols = document.querySelectorAll(`[data-column-number="${colNum}"]`)

console.log("")

for (let col of cols) {
col.classList.add("hovered")
}
})

td.addEventListener("dragleave", (event) => {
let colNum = td.dataset.columnNumber
let cols = document.querySelectorAll(`[data-column-number="${colNum}"]`)

console.log("")

for (let col of cols) {
col.classList.remove("hovered")
}
})
}
< /code>
div {
border: dotted 2px green;
width: 70px;
background-color: yellow;
text-align: center;
cursor: grab;
}

div:active {
cursor: grabbing;
}

td.hovered {
border: dashed 2px red;
}

table {
margin-top: 30px;
}
< /code>
JsFiddle Link: https://jsfiddle.net/z8mkdj3y/26/

Подробнее здесь: https://stackoverflow.com/questions/795 ... -dragleave