2017-04-15 2 views
-2

나는 HTML과 CSS로 웹 사이트를 만들고 있습니다.한 번의 클릭으로 텍스트 변경

웹 사이트로 연결되는 링크를 클릭하면 검은 색 배경이 나타나며 흰색 텍스트가 나타납니다. (그냥 "Hello! 시작하려면 클릭하십시오!") 그러면 이미지를 클릭하면 새 텍스트가 이전 텍스트로 바뀌고 위쪽에 탐색 표시 줄이 나타납니다.

나는 페이딩 이미지를 가지고있다. 아무런 문제가 없다. 하지만 텍스트가 가장 어려운 텍스트입니다 (텍스트와 함께 fadeAndScale 애니메이션을 사용합니다). 어떤 도움을 주시면 감사하겠습니다!

은 내가 지금까지있어 무엇 :

Website html code Website css code

(참고 : 나는 클라우드 9 사용 ... 죄송합니다 ... 또한 내가 새로 온 자바 스크립트 등을 사용할 수 없습니다

+0

지금까지 귀하의 질문에이 코드의 관련 부분을 제공하십시오, 그것은 어려운하기 위해, 코드 (코드 : 아니 이미지를 제공하십시오 그렇지 않으면 너. –

+0

@PatrickHund가 질문을 수정했습니다 ... 내가 질문을 편집해도 의견을 말한 사람들에게 통보합니까? –

+0

개선되었지만 질문에 코드를 포함하십시오. 당신이 제공하는 링크는 미래의 어떤 시점에서 죽을지도 모릅니다. –

답변

0

help (js없이 div를 클릭하면 tabindex가 필요함)를 확인하십시오. 당신이 질문을하면

.box { 
 
    color: #FFF; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    background-color: #000; 
 
    padding: 30px; 
 
} 
 

 
.state-2 { 
 
display: none; 
 
} 
 

 
.box:focus .state-2 { 
 
    display: block; 
 
} 
 

 
.box:focus .state-1 { 
 
    display: none; 
 
}
<div class="box" tabindex="0"> 
 
    <div class="state-1">Hello World</div> 
 
    <div class="state-2">I'm Clicked!</div> 
 
</div>

+0

그 덕분에! 그리고 머리를 가져 주셔서 감사합니다. –

관련 문제