순수 CSS : 호버

2013-05-25 4 views 3 likes

바이올린에 센터 툴팁 위의 텍스트는 내가 지금까지 무엇을 볼 수 있습니다 : http://jsbin.com/udegux/1/edit 순수 CSS : 호버

HTML

<span id="test" class="drag-hint"><span>drag</span>Mouse and drag</span>

CSS : 당신이 볼 수 있듯이

.drag-hint { 
    position:relative; 
} 
.drag-hint > span{ 
    display:none; 
} 
.drag-hint:hover > span { 
    display:inline; 
    position:absolute; 
    top: -25px; 
    left: 30px; 
}

, 내가 현재 "상단"및 "좌측"속성을 지정하여 텍스트 위로 마우스를 가져 가면 드래그 팁이 수동으로 배치됩니다. 텍스트가 더 길거나 더 짧은 경우 팁 값을 중앙에 오도록 그 값을 수동으로 변경해야합니다.

순수 CSS를 사용하여 "마우스로 드래그"라는 단어 위에 자동으로 단어 "끌기"를 배치하는 방법을 찾고 있습니다.

출처

2013-05-25 Jonah

답변

블록을 텍스트 위에 놓고 text-align: center으로 설정하면 JavaScript를 사용할 필요가 없습니다.

.drag-hint:hover > span { 
    display: inline; 
    position:absolute; 
    top: -25px; 
    left: 0; 
    right: 0; 
    text-align: center; 
}

JSBin.

출처

2013-05-25 23:10:40 alex

완벽하게 작동합니다. 왼쪽과 오른쪽을 모두 0으로 설정할 때 무슨 일이 일어나는지 설명 할 수 있습니까? – Jonah

nvm, 내 자신의 질문 [여기] (http://alistapart.com/article/conflictingabsolutepositions)에 대한 해답을 찾았습니다 : 두 개의 0 값은 상자를 부모만큼 넓히고 text-align : center centers 그 뻗어 상자 안에. – Jonah

안녕하세요. 정말 좋은데, 툴팁이 컨테이너보다 넓 으면 어떨까요? http://stackoverflow.com/questions/26292600/pure-css-center-tooltip-above-text-on-hover-pt-2 –

순수 CSS : 호버

답변

관련 문제