Sortable Error

error with hover not clearing on drag

by lukerichison

HTML

<script src="https://rawgithub.com/farhadi/html5sortable/master/jquery.sortable.js"></script>
<h1>html5sortable.js</h1>
<h2>:hover pseudo-class attachment error</h2>
<ul class="sortable">
    <li draggable="true">List Item 1</li>
    <li draggable="true">List Item 2</li>
    <li draggable="true">List Item 3</li>
    <li draggable="true">List Item 4</li>
    <li draggable="true">List Item 5</li>
</ul>
<h3>To reproduce the error:</h3>
<ol>
    <li>Drag List Item 1 and drop over any other list item</li>
    <li>List Item 2 now has the :hover pseduo-class</li>
    <li>The class will not clear until the list-item is moused-over and moused-out</li>
</ol>

CSS

ul { width: 8em; }
ul  li {
    list-style-type: none;
    margin: 0.25em 0;
    border-left: 0.625em solid #666;
    background-color: #eee;
    padding: 0.125em 0 0.125em 1em;
    min-height: 1.25em;
}
ul li:hover {
    border-left-color: #bfd255;
    background-color: #ddd;
}
ul li, ul li:hover {
    -webkit-transition: all 200ms ease-in-out;
       -moz-transition: all 200ms ease-in-out;
        -ms-transition: all 200ms ease-in-out;
         -o-transition: all 200ms ease-in-out;
            transition: all 200ms ease-in-out;
}
ul li.sortable-dragging {}
ul li.sortable-placeholder {
    outline: 0.0625em dashed #777;
    border-left: 0;
}
p {
    margin-top: 4em;
}

JavaScript

$('.sortable').sortable();