목록에있는 항목에 대한 호버링이 작동하지 않습니다.

Question

내가 뭘 잘못하고 있는지 정직하게 알지 못합니다. 목록의 항목을 가리 키기 위해 강조 효과를 추가하고 싶습니다.

<div class="list"> 
     <h3 id="mainlist">YOUR LIST:</h3> 
     <input type="text" class="newitem"> 
     <div class="additem">ADD</div> 
     <ul></ul> 
    </div> 

그리고 제가 JQuery와의이 것은 다음과 같습니다 : html로는 다음과 같습니다

$(document).ready(function() { 
    $('.additem').click(function() { 
     $('ul').append('<li class=listitem><span>' + $('.newitem').val() + '</span></li>'); 
    }); 
    $('.listitem').live ('click',function() { 
     $(this).remove(); 
    }); 
    $('span').hover(function() { 
     $(this).toggleClass('hover'); 
    }); 
}); 

모두가 toggleClass 부분까지 아무것도 내가 가지 위에 마우스 때 발생하는 것 같다 작동합니다. 브라우저 문제가 아니기 때문에 마우스를 움직이면 목록에없는 다른 html 요소와 잘 작동합니다. 나는 또한 '스팬'을 '리'로 변경하려고 시도했지만 그 역시 효과가 없었다.

정말 도움이 될만한가요? 감사!

Answer 1

CSS의 일입니다! hover 핸들러가 무엇을하고 있는지 모든 클래스를 전환하는 경우, 그래서 이런 식으로 작업을 수행합니다

<style> 
    li.listitem span:hover{ 
    /* CSS Rules */ 
    } 
</style> 

Answer 2

을 바로 수행

<style> 
    li.listitem span:hover{ 
    /* some CSS */ 
    } 
</style> 

Answer 3

이 시도 :

$(document).ready(function() { 
$('.additem').click(function() { 
    $('ul').append('<li class=listitem><span>' + $('.newitem').val() + '</span></li>'); 
$('span').hover(function() { 
    $(this).toggleClass('hover'); 
}); 
}); 
$('.listitem').live ('click',function() { 
    $(this).remove(); 
}); 

}); 

기본적으로 당신이 가정합니다 "호버 (hover)"이벤트 처리기가 DOM에없는 경우에도 스팬에 첨부됩니다. 요소를 만든 후에 이벤트를 요소에 첨부해야합니다.