호버에서 <a> 위치를 "절대"로 변경하십시오 (완전한 단어를 표시하기 위해)

Question

일련의 링크가 행에 있습니다.

CSS :

.table div { 
    float:left; 
    margin-right:5px; 
    width:150px; /*width needs to be fixed, since we're limited in space*/ 
    white-space:nowrap; 
    overflow:hidden 
} 
a.trick,a.trick:link,a.trick:active,a.trick:visited {position:static} 
a.trick:hover{position:absolute} 

HTML : (호버 다음 "열"을 겹쳐에 전체 내용을 표시)

<div class=table> 
    <div>Text here</div> 
    <div><a class=trick href="#">Text here may be too long to fit</a></div> 
    <div>Next column</div> 
    <div>of my table made of divs</div> 
</div> 

는 오페라와 파이어 폭스에서 잘 작동합니다.

Chrome (Safari도 가능)에서 반응하지 않습니다. 전혀 움직이지 마세요.

누구나 JS/jQ (순수 CSS)없이 우회하는 방법을 알고 있습니까? 미리 감사드립니다. 당신이 등이이 단어의 크기와 함께 할 수있어 것을 절대 위치를, 받고 싶은 이유를 이해가 안

Answer 1

..

좋아, 내가 여기 http://jsfiddle.net/R6dkJ/ 파이어 폭스 작업 귀하의 예제를 보았다.

이 "제대로"이 정확한 일을 수행하려면, 당신은 예를 들어 이런 짓을 했을까 :

는

a.trick:hover{white-space:nowrap;} 

이 같은 효과를 얻을 수있다.

absolute 속성은 요소 자체의 위치를 ​​지정하는 데 사용됩니다. 물론 원하는 해킹 효과를 얻으려면 해킹을 위해이 코드를 사용할 수 있습니다.하지만 이렇게 할 때 브라우저 간의 비 호환성 문제가 발생할 수 있습니다.

Answer 2

당신은 다음과 같은 전략을 사용할 수있는 링크를 허용하도록 서버의 최대 문자 수를 결정 할 수있는 경우 :

CSS :

.table div { 
    float:left; 
    margin-right:5px; 
    width:150px; 
    white-space:nowrap; 
    overflow:hidden 
} 
a.trick span.extendedText, 
a.trick:link span.extendedText, 
a.trick:active span.extendedText, 
a.trick:visited span.extendedText { 
    display:none; 
} 
a.trick:hover span.extendedText{ 
    display:block; 
} 

HTML :

<div class=table> 
    <div>Text here</div> 
    <div><a class=trick href="#">Text here may <span class="extendedText">be too long to fit</span></a></div> 
    <div>Next column</div> 
    <div>of my table made of divs</div> 
</div> 

을

Answer 3

약간의 jQuery로 해결 :

$('.trick').mouseover(function(){$(this).css('position','absolute');}); 
$('.trick').mouseout(function(){$(this).css('position','relative');}); 

Chrome/Safari는 실제로 위치가 절대적으로되어야한다는 추가 확인을 원합니다. 이제 IE (Internet Explorer)를 포함한 모든 곳에서 사용할 수 있습니다.

참여해 주셔서 감사 드리며 즐거운 "해킹"을 즐기십시오 :).