2012-02-13 8 views
0

나는 테이블 행 자체를 가로 지르면 테이블 행 끝에 특정 컨트롤 (예 : 버튼, 링크)을 표시하는 방법을 생각해 보았습니다. 이 질문 건너 온 : 그는 자신의 사업부 내에서 컨트롤의 HTML을 내장했다javascript를 사용하여 마우스를 가리키면 버튼을 표시하거나 숨기는 기본 방법은 무엇입니까?

jquery specific show buttons on hover

. 그것은 더/덜 동적으로 대신 div의 마우스를 가져 가면 javascript를 사용하여 버튼을 만들 수 있습니까?

다른 사람들이 어떻게하는지 알고 싶습니다.

+0

그냥 어떻게해야합니까? 항상 HTML 레벨에서 단추를 만든 다음 행 onhover 이벤트 처리기에서 단추를 표시하거나 숨 깁니다. 그것은 나에게 가장 쉽고 깨끗한 것 같습니다. –

답변

2

이 효과는 JavaScript 없이도 잘 수행 할 수 있으므로 JavaScript를 건너 뛰고 CSS + HTML로 이동하십시오. 링크 된 질문의 코드를 예로 들어 보겠습니다.

데모 : http://jsfiddle.net/8U2HR/

.product .show_on_hover { 
    display: none; 
} 
.product:hover .show_on_hover { 
    display: block; 
} 

이 솔루션은 :hover pseudo-class을 사용하여 자바 스크립트를 사용할 경우에도, 모든 최신 브라우저 (그리고 IE7 +)의 supported입니다.

+0

CSS와 HTML 만 사용하는 방법을 알고 있습니다. 그러나, 나는 어떤 행을 가진 테이블을 디자인하고있다. 행 위로 마우스를 가져 가면 버튼이 실제로 테이블 바깥에 나타납니다. 무슨 뜻인지 아시나요? 그것은 테이블 바깥 줄의 끝에 매달려있는 것과 같습니다. 내 이해는 행의 너비를 계산하고 올바른 x, y 좌표를 얻기 위해 javascript가 필요하다는 것입니다. CSS만으로 해결할 수 있습니까? – Mark

+0

@ 마크 귀하의 모범을 보여줄 수 있습니까? 나는 당신의 의도를 짐작할 수 있지만 그것이 틀릴 수도 있습니다. 실제 코드를 보는 것이 더 쉽습니다. –

관련 문제