의사 클래스 선택기를 사용하여 내용을 변경 하시겠습니까?

CSS의 의사 클래스 선택자를 사용하여 <p> 태그에 포함 된 텍스트를 어떻게 바꿀 수 있습니까?의사 클래스 선택기를 사용하여 내용을 변경 하시겠습니까?

예를 들어, 단락 위로 마우스를 가져 가면 단락의 내용이 p:hover 선택기에 지정된 내용으로 변경되어야합니다.

2013-05-15 Rishiraj Surti

. 일부 브라우저는 허용하지만 CSS (단락 태그)를 통해 요소의 전체 내용을 변경할 수 있어야합니다. – cimmanon

[마우스를 가져갈 때 텍스트 변경 후 이전 텍스트로 돌아 가기] 가능한 복제본] (http://stackoverflow.com/questions/9913293/change-text-on-hover-then-return-to-the-previous-text) – musefan

jsFiddle.

한 가지 방법은 content 속성과 함께 p:hover:before을 사용하는 것입니다.

HTML : : 여기

은 예입니다

<p> 
<span>First text!</span> 
</p>

CSS :

p:hover span { 
    display:none 
} 
p:hover:before { 
    content:"Second text appears instead!"; 
    color:red; 
}

이 체크 아웃의 content 속성에 대한 자세한 내용을 알고 싶은 경우 좋은 작은 article.

출처

2013-05-15 16:16:03 lifetimes

간편한 간단한 해결책 +1. :) 나는 내 자신의 작은 호기심과 마찬가지로'content' 속성이나 속성의 요점이 무엇인지 궁금합니다. 스타일링보다는 스크립팅 세계에 뿌리를두고있는 것 같습니다. 당신이 손에서 바로 알고 있는지 모르겠다. – War10ck

@ War10ck이 멋진 기사가 당신을 도울 것입니다 - http://css-tricks.com/css-content/ – lifetimes

그것은 완벽하게 대답했습니다! 많은 분들께 감사드립니다! :) – War10ck

제니스 (Zenith)는 더 간단한 솔루션이지만, 다음은 "마우스를 올려 놓은"콘텐츠에 서식을 지정할 수있게 해줍니다.

<p> 
    <span class="normalDisplay">Text to display <em>usually</em>.</span> 
    <span class="hoverDisplay">Text to display on <em>hover</em>.</span> 
</p>

다음과 같은 CSS : 다음 HTML을 시도해보십시오`content` 블록 속성이 유일한 의사 요소에서 작동하기위한 것입니다

p .hoverDisplay { 
    display: none; 
} 
p .normalDisplay { 
    display: inline; 
} 
p:hover .hoverDisplay { 
    display: inline; 
} 
p:hover .normalDisplay { 
    display: none; 
}

Fiddle

출처

2013-05-15 16:31:55

의사 클래스 선택기를 사용하여 내용을 변경 하시겠습니까?

답변

관련 문제