2012-12-17 3 views
0

WordPress에서 맞춤 메뉴를 만들고 div 스타일을 추가하여 텍스트를 클릭 가능한 이미지로 변환했습니다.div에있는 호버 액션 추가

<div style=" 
    background-image: url('http://www.luchaquest.net/home/wp-content/uploads/2012/12/first.png'); 
    background-repeat: no-repeat; 
    display: center; 
    margin: 0; 
    padding: 0 0 0 20px; 
    width: 195px; 
    height: 70px; 
"></div> 

모든 지금까지 노력하고 있습니다,하지만 난 그것뿐만 아니라 호버 행동을하고 싶습니다 내가 모든 프로그래밍이 스타일에 익숙하지 않다 (라인 background-position: 0 -195px을함으로써 accomplishable해야한다).

어떻게이 요소에 모두이 코드에 호버링 정보를 추가 할 수 있습니까?

+1

가능한 중복 [작성하는 방법 : 마우스를 인라인 CSS에서?] (http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css) – Barmar

답변

1

사용 onMouseover와 기능이

<div id="divID" onmouseover="javascript:UpdateBackground();" style=" 
background-image: url('http://www.luchaquest.net/home/wp-content/uploads/2012/12/first.png'); 
background-repeat: no-repeat; 
display: center; 
margin: 0; 
padding: 0 0 0 20px; 
width: 195px; 
height: 70px; 
"></div> 

<script type="text/javascript"> 
    function UpdateBackground(){ 
    alert('before update'); 
document.getElementById("divID").style.backgroundPosition="center bottom"; 
    alert('after update'); 
    } 
</script>​ 
이제
+0

스크립트 주셔서 감사합니다 . 나는 그것을 사용하는 데 어려움을 겪고있다. 그러나 그것은 내가 생각하는 올바른 방향으로 나를 설정하고있다. –

0
<head> 
<link type="css/text" rel="stylesheet" href="Name.css"> 
</head> 
<body> 
<div id="divname" style=" 
background-image: url('http://www.luchaquest.net/home/wp-content/uploads/2012/12/first.png'); 
background-repeat: no-repeat; 
display: center; 
margin: 0; 
padding: 0 0 0 20px; 
width: 195px; 
height: 70px; 
"></div> 
</body> 

, 당신의 .css 파일에 가서 추가

#divname:hover { 
background-position:0 -195px; 
} 

행운을