如何使用JQuery或CSS3创建展开式面板？

Question

基本上我希望能够将我的链接悬停在左侧垂直列中，并在右侧弹出一个面板。这是我期望实现的screenshot。再说一次，当谈到JQuery时，我是一个完全的noob，所以如果有严格的css3方法来做到这一点，我就会全神贯注。

http://flic.kr/p/cTsG9E

Answer 1

有可能是一种方式与CSS3过渡要做到这一点。这些可能不被所有浏览器支持。

最简单的就是使用jQuery。

<a id="trigger-link">Hover Over Me</a> 
. . . 
<div id="target" style="display: none">I should not be using inline styles</div> 

然后在您的JS：

$("#trigger-link").hover(function() { 
    $("#target").show(); 
}, function() { 
    $("#target").hide(); 
}); 

这是一个非常简单的例子。但它应该是一个开始的好地方。

Answer 2

也看jQuery动画易于跨浏览器动画。