JQuery 도구 탭 안의 롤오버 버튼

나는 롤오버 이미지 125x80을 가지고 있습니다. 다음 코드는 간단한 html & css이며 잘 작동하지만 JQuery 도구 탭 창 안에 #questions div를 통합하려고하면 버튼이 나타나지 않습니다. 내가 뭘 잘못하고 있는지 궁금해.JQuery 도구 탭 안의 롤오버 버튼

<html> 
<head> 
<style> 

#questions a:link{ 
height: 40px; 
width: 125px; 
display: block; 
background: url(../images/btn-questions.png) no-repeat left top; 
} 

#questions a:hover{ background-position: left bottom; } 

</style> 
</head> 

<body> 

<div id="questions"> <a href="#"></a> </div> 

</body> 
</html>

그건 작동합니다. 그런 다음 JQuery 도구 탭 창에서 다음과 같이 통합하려고합니다.

<div class="panes"> 

<div> 
This is the first tab. This text appears inside the pane 
<img src="../This image works too.png" /> 

<div id="questions"> 
    <a href="#">WHY THIS ROLLOVER BUTTON DOESN'T APPEAR INSIDE THE PANE?</a> 
</div> 

</div> 
</div>

미리 감사드립니다.

출처

2011-03-27 Jorge

좋아, 마침내 나는 JQuery 도구 탭을 포기했다. 그것은 나에게 너무 복잡해 보입니다. 이제 http://www.sohtanaka.com/web-design/examples/tabs/의 탭을 사용하고 있으며 롤오버 이미지가 정상적으로 작동합니다. 또한, 나는 다음으로 CSS를 변경했다 :

#questions { 
position: absolute; 
left:500px; 
top:75px; 
width:125px; 
height:40px;   
overflow:hidden; /* IE needed */  
} 

#questions a:hover img 
{ margin-top:-40px }

그리고에 의해 사업부를 변경 :

<div id="questions"> 
    <a href="#"><img src="../images/btn-questions.png" ></a> 
</div>

내가이 탭을 선호합니다. 또한 JQuery Tools가 필요로하는 것처럼 탭에 대한 이미지가 필요하지 않습니다. 훨씬 더 좋고, 깨끗하고, 쉽습니다. 희망이 솔루션은 같은 문제가있는 사람에게 도움이 될 수 있습니다.

출처

2011-04-07 23:59:20 Jorge

JQuery 도구 탭 안의 롤오버 버튼

답변

관련 문제