0

125x80 のロールオーバー画像があります。次のコードは単純な html&css であり、正常に動作しますが、#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 Tools タブ ペインに統合しようとします。

<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>

前もって感謝します！

4

1 に答える 1

0

わかりました、ついに私は JQuery Tools Tabs をあきらめました。私には複雑すぎるようです。今、私は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を次のように変更しました：

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

私はこのタブが好きです。また、JQuery ツールが必要とするタブの画像は必要ありません。はるかに良く、きれいで、簡単です。この解決策が同じ問題を抱えている人に役立つことを願っています。

于 2011-04-07T23:59:20.057 に答える