Chrome : tr 위에 마우스를 올려 놓을 때 보이지 않는 테두리를 추가 한 것으로 보입니다.

Chrome에서 표 안의 tr 요소 위에 마우스를 올리면 문제가있는 것으로 보입니다. 다른 모든 브라우저는 제대로 작동하는 것 같습니다. (Chrome 버전 15.0.874.121 m).Chrome : tr 위에 마우스를 올려 놓을 때 보이지 않는 테두리를 추가 한 것으로 보입니다.

jQuery를 사용하여 이벤트를 실행하고 있습니다 (예, 사용자가 마우스를 가리키면 실시간으로 테이블을 변경해야하므로 Javascript를 사용해야합니다.) : 호버는 옵션이 아니며 그렇다고해도 문제도 거기에서 일어나는 것 같다). 여기

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da"> 
    <head> 
     <title>:(</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("tr").hover(function() { 
        $(this).css("background-color", "#aaaaaa"); 
       }, function() { 
        $(this).css("background-color", "#555555"); 
       }); 
      }); 
     </script> 
     <style type="text/css"> 
      table, table tr, table tr td { 
       border: 0px; 
       border-spacing: 0px; 
       border-collapse: collapse; 
       padding: 0px; 
      } 
      table { 
       width: 500px; 
      } 
      table tr { 
       background-color: #555555; 
       color: #FFFFFF; 
      } 
      /*table tr:hover { 
       background-color: #aaaaaa; 
      }*/ 
     </style> 
    </head> 
    <body> 
     <table> 
      <tr><td>test1</td><td>this1</td><td>in1</td><td>chrome1</td></tr> 
      <tr><td>test2</td><td>this2</td><td>in2</td><td>chrome2</td></tr> 
      <tr><td>test3</td><td>this3</td><td>in3</td><td>chrome3</td></tr> 
      <tr><td>test4</td><td>this4</td><td>in4</td><td>chrome4</td></tr> 
      <tr><td>test5</td><td>this5</td><td>in5</td><td>chrome5</td></tr> 
      <tr><td>test6</td><td>this6</td><td>in6</td><td>chrome6</td></tr> 
      <tr><td>test7</td><td>this7</td><td>in7</td><td>chrome7</td></tr> 
     </table> 
    </body> 
</html>

코드가 웹 서버에서 실행중인 : 개별 TD 요소

http://www.jalsoedesign.net/test/tabletest/tabletest.php

가 가장 마지막 유혹 (또는 시작) (여기

문제의 코드입니다 함수가 TR을 사용하더라도) "onmouseleave"javascript 함수를 호출하는 것처럼 보입니다. onmouseover/onmouseout도 시도해 봤는데 아무런 변화가없는 것 같습니다. 어떤 아이디어?

는 편집 :

는 그것을 알아 냈다. 의 경우의 이유 때문에 td 요소에 "position : relative"를 추가하면 문제가 해결되는 것 같습니다. 나는 왜 이런 일이 일어나는지 알지 못합니다. 누군가가 단서를 가지고 있다면, 자유롭게 의견을 말하십시오. :) 2013년 2월 28일

업데이트 :

이 크롬의 최신 버전에서 발생하지 않는 것 같습니다.

출처

2011-12-14 h2ooooooo

왜 * ": 호버가 옵션이 아닌지 이해하지 못했습니다"*? – Tomalak

우선, 그것은 작동하지 않으며 둘째로 특정 TD 요소의 colspan을 변경하기 위해 TR 내용을 수정해야합니다. – h2ooooooo

아, 알겠습니다. 나는 배경색을 바꾸는 것이 당신이 바꿀 필요가있는 유일한 것이라고 생각했습니다. – Tomalak

이전에 언급했듯이,이 해답을 남기지 않고, 해결책은 모든 TD 요소에 position: relative을 추가하는 것이 었습니다.

출처

2012-05-14 11:06:15 h2ooooooo

Chrome : tr 위에 마우스를 올려 놓을 때 보이지 않는 테두리를 추가 한 것으로 보입니다.

답변

관련 문제