如何使用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動畫易於跨瀏覽器動畫。