我有一个翻转图像125x80。以下代码是简单的html& css并且工作正常,但是当我尝试将#questions div集成到JQuery Tools选项卡窗格中时,该按钮永远不会出现。我想知道我做错了什么。
<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>
提前致谢!
答案 0 :(得分: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 Tools所需的任何选项卡图像。更好,更干净,更容易。希望这个解决方案可以帮助任何有同样问题的人。