:hover sticks to element on drag and drop
drag-and-drop, hover, html, javascript
Solution
Use the `mouseover` and `mouseout` functions and add/remove a class called `hovered` instead of using CSS's `:hover` pseudo-class. Here is the updated jsFiddle
Javascript to add (inside for loop)
li.addEventListener("mouseover", () => {
li.classList.add("hovered");
});
li.addEventListener("mouseout", () => {
li.classList.remove("hovered");
});
CSS
.hovered {
background: #fc9;
}
Side note: Be careful not so select all `li` on your page when selecting the variable.
Problem
I have simple ol-li construction and want to add drag'n'drop to it. Additionaly I want to highlight hover item and dragover item in different colors. But it is an unusual bug in WebKit. - Capture last item. - Drag it to the top. - Drop it to the first item. And last element capture the hover pseudoclass! Why? How can I prevent it? This is an example: http://jsfiddle.net/zFk2V/3/ ``` var lis = document.querySelectorAll("li"), ol = document.querySelector("ol"), dragged = false, dragover = false; ol.addEventListener("drop", function(event) { ol.insertBefore(dragged,dragover); this.classList.remove("insistent"); }, false); for (var i=0, n = lis.length; i < n; i++) { lis[i].addEventListener("dragstart", function(event) { dragged = this; ol.classList.add("insistent"); }, false); lis[i].addEventListener("dragover", function(event) { if (dragover) { dragover.classList.remove("dragover"); } event.preventDefault(); dragover = this; this.classList.add("dragover"); }, false); } ```