제이쿼리를 자바스크립트로 변경하고 싶습니다.
본문
$(function(){
$('#contentsWarp .pass ul li').hover(function(){
$(this).addClass('on').siblings('li').removeClass('on');
})
})
요 소스를 간단히 자바스크립트로 변경하고 싶습니다.
querySelectorAll 로 마우스오버로 소스를 짜봤지만 적용되지 않아서요, 도움주시면 감사하겠습니다ㅠㅠ...
답변 1
<style>
#contentsWarp .pass ul li {
cursor: pointer;
}
.on {
background-color: #eee;
}
</style>
<div id="contentsWarp">
<div class="pass">
<ul>
<li>aaaaaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaaaaa</li>
</ul>
</div>
</div>
<script>
// $(function(){
// $('#contentsWarp .pass ul li').hover(function(){
// $(this).addClass('on').siblings('li').removeClass('on');
// })
// })
document.querySelectorAll('#contentsWarp .pass ul li').forEach(function (el) {
el.addEventListener('mouseenter', function () {
this.className = 'on';
});
el.addEventListener('mouseleave', function () {
this.className = this.className.replace(/(?:^|\s*?)on(?:\s*?|$)/, '');
});
});
</script>
답변 감사합니다ㅠㅠ!!
답변을 작성하시기 전에 로그인 해주세요.