꼬집음없이 텍스트 위로 마우스를 가져 가면 텍스트가 어떻게 바뀌나요?

내가 이해하는 한, CSS는 기본적인 방법으로 :hover에있는 요소의 내용을 변경하는 데 사용할 수 있습니다. 이 코드를 사용하고꼬집음없이 텍스트 위로 마우스를 가져 가면 텍스트가 어떻게 바뀌나요?

HTML :

<button><span>3 replies</span></button>

CSS :

button {width:6em} 
button:hover span {display:none} 
button:hover:before {content:"Reply!"}

하지만 버튼 위에 마우스를 가져 가면, 그것이 내가 내 같은 부드럽게 할

매우 심하게 경련 음악 플레이어가 this link

버튼 중 하나를 가리키면 파인더 lease, premium, 또는 trackout 가격, 그들은 여기 내 선수 http://djwckd.com/test

출처

2013-03-18 user2094719

귀하의 링크가 나를 위해 트 위치하지 않는 것 같지 않으며, 이것도 않습니다 : http://jsfiddle.net/ExplosionPIlls/zUDmc/ –

링크는 그가 원하는 것의 예였습니다 –

중요한 것은 당신의 레이아웃이 호버에 변경되지 않습니다 있는지 확인하는 것입니다의 일부입니다 +add 텍스트

로 전환. 이를 달성하는 가장 쉬운 방법은 호버링이 아닌 경우에도 모든 부품에 대해 레이아웃에 공간을 할당하는 것입니다.

button { width: 6em } 
button:hover span {display:none} 
button:before { width: 100px; content: ""; } 
button:hover:before {content: "Reply!"}

가 공중 선회하지 때 크기도 레이아웃을 :before 의사 요소를 제공함으로써시의 내용을 변경해서는 안 : 저는 예를 들어 당신이 여기에 달성하기 위해 노력되지만, 레이아웃 어떤 종류의 확실하지 않다 변경. 원하는 특정 레이아웃에 대해이 값을 조정해야 할 수도 있지만 일반적으로 모든 크기 관련 속성이 이 지정되지 않고:hover이 지정되지 않은 경우 레이아웃 이외의 속성 (즉, 모든 상자 크기에 영향을 미침) :hover 상태입니다.

출처

2013-03-18 01:08:16

http://djwckd.com/ 테스트는 내 플레이어의 일부입니다. 부드러운 텍스트 변경을 수행 할 수 있는지 확인할 수 있습니까? – user2094719

이 링크는 배경 이미지를 유혹되어 있지만 a:hover-a 및 background-image: url('image2'); 링크 사용 background-image: url('image1');와 정확히 같은하려면 테스트 링크에서 당신이 <a> 요소 전에 배경 이미지를 주었다 제공한다.

배경 이미지 위치 지정을 사용할 수 있습니다. 이렇게하려면 이렇게해야합니다.

+--------------+ 
|    | position this background to a 
+--------------+ 
| + Add  | position this background to a:hover 
+--------------+

이렇게하면 너비가 64px이고 높이가 32px가됩니다. 다음 지금

a:hover{background-position: 0% 0%;}

출처

2013-03-18 02:52:07

메신저 버튼을 사용하여 이미지를 사용하고 있지 않습니다. – user2094719

코드 예제를 보여줄 수있는 방법은 – user2094719

입니다. 나는 나의 대답을 편집했다. 만나다. –

에 배경의 위치를 a{background-image: url('image') left top no-repeat; background-position: 0% 100%;}

로 배경의 위치를 나는 해결책을 가지고 생각합니다. 트릭은 텍스트의 컨테이너 너비를 설정하는 것 중 하나입니다. 또한 빠른 텍스트 변경을 위해 onmouseover 대신 onmouseenter를 사용했습니다 (내 이론은 onmouseenter가 빠른 onmouseover).

var videoplayer = { 
 
    text: "<b>Hello World</b>", 
 
    author: "(you)" 
 
    }

<div onmouseenter="this.innerHTML = videoplayer.text;" onmouseleave="this.innerHTML = '<b>(hover over me)</b>';" style="background-color: red; padding: 10px; width: 110px; text-align: center; color: white;">(hover over me)</div>

그냥 당신이 필요로하는 폭 사업부의 너비를 설정해야합니다 예를 들면 다음과 같습니다.(배경을 원하지 않는다면 background-color : red를 background-color : transparent로 변경하십시오.) 한 가지 더 : div : display : block을 기본값으로 사용하는 컨테이너를 사용해야합니다. 내가 div를 사용하는 것이 좋습니다. 희망이 도움이!

출처

2017-01-12 00:05:52 IamGuest

꼬집음없이 텍스트 위로 마우스를 가져 가면 텍스트가 어떻게 바뀌나요?

답변

관련 문제