단추를 강조 표시 한 상태에서 단추 내의 텍스트를 변경하려면 어떻게합니까?

Question

단추를 들었을 때 단추 내에서 텍스트를 변경할 수 있기를 원합니다. 텍스트는 전체 단추 대신 가리키면 색이 바뀝니다. 버튼 배경은 #FFFFFF해야하며, 텍스트 색상은 # 3A75B0

HTML해야한다 :

<div class="getStartedButton"> 
     <a href ="/signup"> 
      <button class="getStarted"> 
       Get Started 
      </button> 
     </a> 
</div> 

CSS :

.getStarted { 
    display: table; 
    margin: 0 auto !important; 
    height: 170px; 
    width: 300px; 
    background: transparent; 
    text-decoration: none; 
    border-style: solid; 
    border-color: #FFFFFF; 
    font-family: Helvetica; 
    text-align: center; 
    color: #FFFFFF; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    font-size: 60px; 
    padding: 20px 10px 50px 10px; 
    margin-bottom: 50px; 
} 

.getStarted a { 
    text-decoration: none; 
    font-family: Helvetica; 
    text-align: center; 
    color: #FFFFFF; 
    font-size: 60px; 
    margin-bottom: 50px; 
} 

a:link { 
    text-decoration: none; 
} 

a:visited { 
    text-decoration: none; 
} 


.getStartedButton:hover { 
    color: #3A75B0; 
    background-color: #FFFFFF; 
} 

.getStartedButton { 
    width: 300px; 
    margin-left: auto; 
    margin-right: auto; 
    border-radius: 10px; 
} 

.getStartedButton a:hover { 
    color: #3A75B0; 
} 

.getStarted:hover { 
    color: #3A75B0; 
} 

.getStartedButton.getStarted:hover { 
    color: #3A75B0; 
} 

Answer 1

이 순수 CSS에서 할 수 없습니다. 이 JS 접근 방식을 시도해보십시오 당신을 위해 작동

function changeText(button){ 
 
    
 
    button.innerHTML = "Text Changed!"; 
 
    
 
    }

<div class="getStartedButton"> 
 
     <a href ="/signup"> 
 
      <button onmouseover="changeText(this)" class="getStarted"> 
 
       Get Started 
 
      </button> 
 
     </a> 
 
</div>

희망을!