숨겨진 텍스트를 표시하려면 호버 켜기 CSS

Question

관련 질문에 다른 방법이 몇 가지 있습니다. 그러나 여기에 이전에 있었지만 이전에는 작동했지만 지금은 전혀 사용하지 않습니다. 큰 테이블이 있고 마지막 열은 이미지이고 원하는 동작은 호버에 텍스트를 표시합니다. 여기

는 CSS입니다 :

#freebie-table td[data-title]:hover:after { 
    content: attr(data-title); 
    padding: 4px 8px; 
    color: #333; 
    position: absolute; 
    left: 70%; 
    top: 100%; 
    width: 150px; 
    height: 200px; 
    z-index: 20; 
    /*white-space: nowrap; */ 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222; 
    -webkit-box-shadow: 0px 0px 4px #222; 
    box-shadow: 0px 0px 4px #222; 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); 
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc); 
} 

여기에 데이터 title 속성을 가지고있는 TD 요소의 예입니다

<td data-title="THIS TEXT IS SUPPOSED TO APPEAR ON HOVER"><img src="images/click2read.png" alt="click 2 read" height="38" width="33" /></td> 

어떤 생각이 왜이 작동하지 않습니다. 아무도 대답하지 않으면 jquery 방식으로 시도해 볼 것입니다.

Answer 1

나머지 코드를 보지 않고도 말하기는 어렵지만 요소가 예상 밖에서 나타날 수도 있습니다. 호버 위에 나타나는이 요소의 top 값은 100%입니다. td에 position: relative을 추가하면 숨겨진 것이 바로 td 아래에 표시됩니다. 또한 테이블 ID가 #freebie-table인지 확인하십시오.

#freebie-table td[data-title]:hover:after { 
 
    content: attr(data-title); 
 
    padding: 4px 8px; 
 
    color: #333; 
 
    position: absolute; 
 
    left: 70%; 
 
    top: 100%; 
 
    width: 150px; 
 
    height: 200px; 
 
    z-index: 20; 
 
    /*white-space: nowrap; */ 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
    -moz-box-shadow: 0px 0px 4px #222; 
 
    -webkit-box-shadow: 0px 0px 4px #222; 
 
    box-shadow: 0px 0px 4px #222; 
 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); 
 
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); 
 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
 
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); 
 
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc); 
 
} 
 

 
#freebie-table td { 
 
    position: relative; 
 
}

<table id="freebie-table"> 
 
    <tr> 
 
    <td data-title="THIS TEXT IS SUPPOSED TO APPEAR ON HOVER"><img src="images/click2read.png" alt="click 2 read" height="38" width="33" /></td> 
 
    </tr> 
 
</table>