2010-01-31 6 views
-1

이 표가 있습니다. 나는 그 셀 위로 움직일 때, 검은 색에서 빨간색으로 셀의 색을 바꾸고 싶습니다. 나는 .hover 메서드를 사용하고 있습니다. 그리고 나는 필요한 것에 따라 어떻게 작업해야하는지 알아 내는데 어려움을 겪고 있습니다.jquery에서 호버 기능을 사용하여 하나의 셀만 강조 표시하는 방법 알아보기

<script type="text/javascript"> 

$(document).ready(function(){ 

    $("#board tr td").hover(function() 
    { 
     $(this).css('border-color', 'red'); 
    }, 
    function() 
    { 
     $(this).css('border-color', 'black') 
    }); 
}); 

</script> 

스크립트 태그

페이지가로드에 type = "text/javascript"를 기억

<html> 
    <head> 
    <script type="text/javascript" src="jquery-1.4.js"></script> 
    <script> 
    $board = $('#board') 
    $(this).hover(function() { 
     $('td').css('border-color', 'red'); 
    }, 
    function() { 
     $('td').css('border-color', 'black') 
    }) 
    </script> 
    <style type="text/css"> 
    td { 
     border-style:solid; 
     border-color:black; 
    } 
    </style>   
    </head> 
    <body> 
    <table id="board"> 
     <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     </tr> 
     <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     </tr> 
     <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     </tr> 
     <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     </tr> 
    </table> 
    <input type="button" value="Shuffle" onclick="change()"/> 
    </body> 
</html> 

답변

0

이 시도 $ (document) .ready 함수가 호출되면 hover 이벤트가 설정됩니다.

첫 번째 함수가 #board 내에서 td를 가리키면 this에 호출됩니다. 마우스가 밖으로 나가면 두 번째 함수를 호출하여 테두리를 검정색으로 되돌립니다.

+0

감사합니다!, 그게 작동하도록 보였습니다 – Steffan

+0

당신을 환영합니다! 그것이 도움이된다면 이것을 답으로 표시하는 것을 잊지 마십시오. –

0

당신이 뭔가를 시도 할 수

$board.find('td').hover(function(){ 
    $(this).css('border-color', 'red'); 
}, 
function(){ 
    $(this).css('border-color', 'black') 
}) 
+0

나는 그것을 추가했지만 지금은 아무 것도 강조 표시하지 않았다. – Steffan

관련 문제