2013-11-25 1 views
0

페이지에 중앙 집중식 "Hire Me"버튼이있는 웹 사이트에서 작업하고 있습니다. 그것은 다음과 같은 코드를 사용하여 만든 : 내가하고 싶은 무엇마우스를 올리거나 활성화 할 때 요소의 텍스트를 변경하는 방법은 무엇입니까?

<div id="hire_me_button"> 
    <a href="contact.html"><h4 id="hire_me" class="button">Hire Me</h4></a> 
</div> 



#hire_me_button { 
text-align: center; 
width: 73.3%; 
} 

.button { 
    text-align: center; 
    display: inline-block; 
    width: 8em; 
    height: 3em; 
    background: rgba(0, 0, 0, 0.6); 
    border: 1px solid black; 
    padding: .75rem .625rem; 
    border-radius: 8px; 
    color: white; 
    font-size: .875rem; 
    font-family: Helvetica, Arial, Sans-Serif; 
    text-align: center; 
} 

텍스트 변경함으로써 약간의 장난이 될 것입니다 - 중 누군가가 버튼 위에 놓을 때 또는이 클릭 된 때. 내가 더 잘 맞는 것에 따라 "현명한 의사 결정을 현명한 선택에"날 고용 ""또는 "에서 변경할 텍스트를하고 싶습니다.

+0

에 호버 이벤트 리스너를 바인딩 할 수 있습니다 : //jsfiddle.net/arunpjohny/F3j3p/1/? –

+0

나는'CSS3'을 제안 할 것이다. ** 빠른 google 검색은 [이] (http://tympanus.net/codrops/2011/11/07/animated -buttons-with-css3 /) ** 또는 사용자 정의 애니메이션을 할 수 있습니다. – Borsn

+0

고마워요. 아름답게 작동합니다. Arun. – MddHtt13

답변

1

당신은 HTTP와 같은 버튼

$(function(){ 
    // bind a hover event listener 
    $('#hire_me').hover(function(){ 
     $(this).text('wise choice'); // on hover in, change the text 
    },function(){ 
     $(this).text('hire me'); // on hover out, change the text back 
    }); 
}); 
관련 문제