호버 <a> 변화 <td>에 <td> 배경 이미지

Question

나는 사용자가 내 HTML의 <td>

부분에 링크 <a>를 놓을 때 <TD>의 배경을 변경하려면

는 :

<tr class="menuBarBottomSelected"> 
<td width="20%"> 
<a class="menuBarBottomUnselected" href="./url.php">Getting&nbsp;Started</a> 
</td> 
</tr> 

이 내 CSS입니다 :

.menuBarBottomSelected{ 
    background-image: url('/auth/radius/submenu_bg.jpg'); 
    background-repeat: repeat-x; 
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
    color : #ffffff; 
    border-top:#666666 solid 1px; 
} 

tr.menuBarBottomUnselected td a:hover{ 
    color:black;  
    background-image: url('/auth/radius/submenu_bg_hover.jpg'); 
    background-repeat: repeat-x;} 

html이 생성되어서 이유가 확실하지 않습니다. 링크와 td에 동일한 클래스를 사용합니다. 링크 상에 hover를 지정할 수 있었지만 텍스트의 배경 만 전체가 변경되지 않았습니다. <td>

Answer 1

; 이것은 앵커 요소로 td를 채울 것이고 td의 모든 픽셀은 링크로 동작 할 것입니다 (클릭 할 수 있습니다). 그 다음 여기 괜찮아요 솔루션 인 경우 : 여기 예에서

이

.menuBarBottomSelected td a{ 
    display:block; 
    width:100%; 
    height:100%; 
    background-image: url('/auth/radius/submenu_bg.jpg'); 
    background-repeat: repeat-x; 
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
    color : #ffffff; 
    border-top:#666666 solid 1px; 
} 

tr.menuBarBottomUnselected td a:hover{ 
    color:black;  
    background-image: url('/auth/radius/submenu_bg_hover.jpg'); 
    background-repeat: repeat-x;} 

봐 : 이것은 모든 브라우저에서 작동 http://jsfiddle.net/mohsen/LnabQ/

하지만 당신은 당신이 필요로하는 다음 앵커 태그로 TD를 기입하지 않으려면 JavaScript을 사용하여 클래스를 추가하고 클래스를 td에 제거하십시오. 내 지식에 당신은 가질 수 없어 td:hover

Answer 2

한 가지 방법은 이벤트입니다. <a> 태그에 onmouseover을 할당하여 부모의 배경을 변경하는 함수를 호출하십시오. <td>.

사이드 노트 : CSS에서 이것을 수행하는 좋은 방법은 부모 선택기인데, 불행히도 does not currently exist입니다.

편집 : <td>에 앵커 태그 만 포함되어 있다고 확신하는 경우 : 호버를 <td>에 적용 할 수 있습니다. 그렇다면 배경을 바꾸는 것도 아무런 문제가되지 않습니다.

<tr class="menuBarBottomSelected"> 
    <td class="menuBarBottomUnselected" width="20%"> 
     <a href="./url.php">Getting&nbsp;Started</a> 
    </td> 
</tr> 

와 ...

tr.menuBarBottomUnselected td:hover{ 
    background-image: url('/auth/radius/submenu_bg_hover.jpg'); 
    background-repeat: repeat-x; 
} 

100 %의 블록으로의 링크 및 설정된 폭과 높이를 표시한다

Answer 3

당신은 단지 이런 배경을 바꿀 수 없습니까?

a.menuBarBottomUnselected {background-image: url('/auth/radius/submenu_bg.jpg'); } 

a.menuBarBottomUnselected:hover {background-image: url('/auth/radius/submenu_bg_hover.jpg');}