jQuery 호버 효과 표 위로

jQuery를 처음 사용하고 테이블에 호버링 효과를주기 위해 노력하고 있지만 어떻게해야할지 모르겠다. 텍스트를 빨강으로 만들고 포커스를 잃어 버렸을 때 다시 붉은 색을 제거하는 방법을 원합니다.jQuery 호버 효과 표 위로

이것은 내가 지금까지 무엇을 가지고 : 당신이해야 할 모든 마우스 휴가를 위해 가져가 다른 기능을 통과

<script type="text/javascript"> 
$(function() { 
    $('tr').hover(function() { 
     $(this).css('color', 'red') 
    }); 
}); 
</script> 


<table border="1"> 
    <tr> 
     <th>ID</th> 
     <th>name</th> 
    </tr> 
    <tr> 
     <td>#1</td> 
     <td>ole</td> 
    </tr> 
    <tr> 
     <td>#2</td> 
     <td>jeffrey</td> 
    </tr> 
    <tr> 
     <td>#3</td> 
     <td>collin</td> 
    </tr> 
    <tr> 
     <td>#4</td> 
     <td>eve</td> 
    </tr> 
</table>

출처

2011-03-05 Sjmon

코드가 완벽합니다.'.addClass'를 사용하십시오. – diEcho

입니다.

$('tr').hover(function() { 
    $(this).css('color', 'red'); 
}, function() { 
    $(this).css('color', ''); 
});

예를 들어 jsfiddle을 참조하십시오.

또는 CSS에서만 가능합니다.

tr:hover{ 
    color:red; 
}

는 IE 5/6은 링크를 모두 지원합니다. IE 7 개의 지원 : 호버 (활성화하지 않음) : 모든 요소. 에서 here.

출처

2011-03-05 14:46:49

호버에 핸들러를 추가해야합니다. 여기를 참조하십시오 여기 http://jsfiddle.net/bF9xy/ 문서 : http://api.jquery.com/hover/

$(function() { 
    $('tr').hover(function() { 
     $(this).css('color', 'red') 
    },function() { 
     $(this).css('color', 'black') 
    } 
); 
});

출처

2011-03-05 14:49:13 DhruvPathak

.hover() jQuery를 함수는 두 개의 인수를 취합니다 하나의 이벤트에서 마우스 기능과 마우스 아웃에 대한 두 번째 기능 :

$('dom element').hover(function() 
{ 
    //your code for mouse over 
}, function() 
{ 
    //your code for mouse out 
});

을

추신 : 일반적으로 당신의 상황과 같은 상황에서 CSS 속성 자체 대신 요소의 클래스를 변경하는 것이 좋습니다. .addClass() 및 .removeClass()를 사용하십시오. 이렇게하면 javascript 대신 css를 변경하여 앞으로 커서를 올려 놓으면 쉽게 숨 막힐 것입니다.

출처

2011-03-05 14:51:57 Bakaburg

<style type="text/css"> 
.highlight { background-color:red; } 
<style> 
<script> 
$(
function() 
{ 
    $("table>tr").hover(
    function() 
    { 
    $(this).addClass("highlight"); 
    }, 
    function() 
    { 
    $(this).removeClass("highlight"); 
    } 
) 
} 
) 
</script>

출처

2011-03-05 14:52:04 diEcho

약간의 해결 방법 :

스타일은 일반적으로 빨간색 텍스트보다 더 복잡하기 때문에

<html> 
    <head> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('tr').hover(function() { 
        $(this).css('color', 'red') 
       }); 
       $('tr').mouseout(function() { 
        $(this).css('color', 'black') 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <table border="1"> 
      <tr> 
       <th>ID</th> 
       <th>name</th> 
      </tr> 
      <tr> 
       <td>#1</td> 
       <td>ole</td> 
      </tr> 
      <tr> 
       <td>#2</td> 
       <td>jeffrey</td> 
      </tr> 
      <tr> 
       <td>#3</td> 
       <td>collin</td> 
      </tr> 
      <tr> 
       <td>#4</td> 
       <td>eve</td> 
      </tr> 
     </table> 
    </body> 
</html>/

출처

2011-03-05 14:53:19 Zakaria

, 당신은이 경로가는 고려해 볼 수 있습니다 :

$(function() { 
$('tr').hover(function() { 
    $(this).toggleClass('redHover') 
     }, function() { 
    $(this).toggleClass('redHover') 
    }); 
});

redHover이 될 뭔가

같은

<style> 
.redHover{ 
    color:red; 
} 
</style>

다음 c jQuery를 다시 작성하지 않고 스타일을 변경했습니다.

출처

2011-03-05 14:54:36

jQuery 호버 효과 표 위로

답변

관련 문제