JQuery 工具选项卡内的翻转按钮

发布于 2024-10-26 12:25:20 字数 928 浏览 4 评论 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 工具选项卡窗格中，方法如下：

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

提前致谢！

原文

I have a rollover image 125x80. The following code is simple html&css and works ok, but when I try to integrate the #questions div inside a JQuery Tools Tab Pane, the button never appears. I'm wondering what I'm doing wrong.

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

That's works. Then I try to integrate it in JQuery Tools Tab Pane, the following way:

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

Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沉睡月亮 2024-11-02 12:25:20

好吧，最后我放弃了 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 工具那样为选项卡提供任何图像。更好、更干净、更简单。希望这个解决方案可以帮助任何遇到同样问题的人。

Ok, finally I gave up with JQuery Tools Tabs. It seems too complicated to me. Now I'm using the tabs from http://www.sohtanaka.com/web-design/examples/tabs/ and the rollover image works ok. Also, I had to change the CSS by the following:

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

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

And I changed the div by:

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

I prefer this tab. Also, you don't need any image for the tabs as JQuery Tools requires. Much better, clean, and easy. Hope this solution can help to anyone with the same problem.

回复收藏 0 原文

~没有更多了~