tr : 보이지 않는 td에서 호버가 트리거되지 않음

Question

행 위에 마우스를 올리면 해당 행에 대해 일부 버튼이 표시되는 표를 만들고 싶습니다. 지금 당장은 항상 단추가 있고 (실제로는 텍스트 만 있습니다), 테이블 행을 마우스로 가리키면 단추의 가시성이 숨김 상태로 바뀝니다. 그러나 hover 이벤트는 이벤트가 실제로 tr에 있더라도 숨겨진 td 요소에서 트리거되지 않는 것처럼 보입니다. 이 문제를 어떻게 해결할 수 있습니까? 불투명도를 0으로 설정하고 싶지는 않습니다. 그래도 여전히 불투명도를 클릭 할 수 있기 때문입니다 (맞습니까?). 결국 클래스를 추가/제거하여 호버 효과를 켜고 끌 수 있기를 원하므로 불투명도가 작동하지 않는 이유가됩니다.

내 코드는 다음과 같습니다 http://jsfiddle.net/h7oh9xvk/

HTML :

는

<table> 
    <tr><td class='precell'>X</td><td>blablabla</td><td class='postcell'>[edit]</td></tr> 
    <tr><td class='precell'>X</td><td>blablabla</td><td class='postcell'>[edit]</td></tr> 
    <tr><td class='precell'>X</td><td>blablabla</td><td class='postcell'>[edit]</td></tr> 
</table> 

CSS :

.precell, .postcell { 
    visibility: hidden; 
} 
tr:hover .precell { 
    visibility:visible; 
} 
tr:hover .postcell { 
    visibility:visible; 
} 

편집 : 추가 정보 : 주요 문제 중 하나는 것 같다가되게 그 공간 사이 행의 td 요소가 행의 일부로 간주되지 않습니다 (행의 호버 이벤트를 트리거하지 않음). 한 셀에서 다른 셀로 마우스를 가로로 움직이면 td 사이에 마우스를 놓으면 "닫히는"공간이있는 것 같습니다. 이것을 막을 수있는 방법이 있습니까? 문제가 해결 될 수도 있습니다.

Answer 1

원하는 방식으로 호버 이벤트를 트리거하는 것은 불가능하지만 쉽게 해결할 수 있습니다. 우리는 TD 내 사업부를 포함하고, 그 대신에 따라 행동하면, 그것은 완벽하게 작동이 같은

.precell, .postcell { 
 
    visibility: hidden; 
 
} 
 
tr:hover .precell { 
 
    visibility:visible; 
 
} 
 
tr:hover .postcell { 
 
    visibility:visible; 
 
}

<table> 
 
    <tr><td> <div class='precell'>X</div></td><td>blablabla</td><td> <div class='postcell'>[edit]</div></td></tr> 
 
    <tr><td> <div class='precell'>X</div></td><td>blablabla</td><td> <div class='postcell'>[edit]</div></td></tr> 
 
    <tr><td> <div class='precell'>X</div></td><td>blablabla</td><td> <div class='postcell'>[edit]</div></td></tr> 
 
</table>

Answer 2

당신은 display: none/display: table-cell 사용할 수 있습니다

table { 
 
    table-layout: fixed; 
 
} 
 
.precell, .postcell { 
 
    display: none; 
 
    width:0px; 
 
} 
 
tr:hover .precell { 
 
    display: table-cell; 
 
} 
 
td { 
 
    display: inline-block; 
 
    float:left; 
 
} 
 
tr:hover .postcell { 
 
    display: table-cell; 
 
} 
 
tr, td {padding:0px;}

<table> 
 
    <tr> 
 
     <td class='precell'>X</td> 
 
     <td style="margin-left:15px;">blablabla</td> 
 
     <td class='postcell'>[edit]</td> 
 
    </tr> 
 
    <tr> 
 
     <td class='precell'>X</td> 
 
     <td style="margin-left:15px;">blablabla</td> 
 
     <td class='postcell'>[edit]</td> 
 
    </tr> 
 
    <tr> 
 
     <td class='precell'>X</td> 
 
     <td style="margin-left:15px;">blablabla</td> 
 
     <td class='postcell'>[edit]</td> 
 
    </tr> 
 
</table>

는 @Mary 멜로디 코멘트 후 업데이트되었습니다.