<ul id="bug"> <li class="item">1</li> <li class="item">2</li> <li class="item">3</li> </ul> <ul id="solution"> <li class="item">1'</li> <li class="item">2'</li> <li class="item">3'</li> </ul>
ul { float: left; } .item { width: 100px; height: 100px; color: white; background-color: black; text-align: center; line-height: 100px; border: 1px solid white; } /* :hoverのスタイルが残る */ #bug > .item { background-color: red; } #bug > .item:hover { opacity: .5; } /* :hoverを使わない */ #solution > .item { background-color: blue; } #solution > .item.-hover { opacity: .5; }
const bug = document.getElementById('bug'); Sortable.create(bug); const solution = document.getElementById('solution'); Sortable.create(solution); Array.from(solution.children).forEach(child => { child.addEventListener('mouseenter', event => { event.target.classList.add('-hover'); }); child.addEventListener('mouseleave', event => { event.target.classList.remove('-hover'); }); });