2010-10-22 84 views
0

我有一個網絡應用程序,其中包含用戶評論列表。我想對這些意見(投票,回覆等。)額外的選項只出現在評論本身就是鼠標懸停-ED高級滾動顯示額外選項

的什麼,我期待的是YouTube視頻最好的例子:

http://www.youtube.com/watch?v=s2VzLn6DMCE&ob=av3e

當您轉到註釋時,選項(回覆,投票上/下)僅在該特定評論滾動時纔會顯示。這是如何實現的?它只是一個使用jQuery(或類似的JavaScript庫)和顯示隱藏的div的問題?

編輯:

好了,所以我滾來滾去的元素是複雜的,我需要用JavaScript來做到這一點。我正在使用rails,所以原型就是這樣!每個單獨的列表項都有一個唯一的ID,但我不知道如何將這個ID變量傳遞給原型!這樣它可以顯示/隱藏特定列表項中的元素。我如何去做這件事?

+0

「此視頻包含來自EMI的內容,它不在您所在的國家/地區提供。」 *搖在音樂行業的拳頭* – 2010-10-22 03:49:24

+0

這太糟糕了,這是一個平庸的廣播歌曲很棒的視頻 – goddamnyouryan 2010-10-22 04:49:23

回答

2

在我看來,CSS是最好的方法。這裏有一個垂直的方式:

HTML:

<div class='roller'> 
    <div>Options</div> 
    <div>Comments</div> 
</div> 

CSS:

.roller { overflow:hidden; height:30px;line-height:30px } 
.roller:hover { height:60px } 

這裏是一個水平的方式,以相同的HTML:

CSS:

.roller { overflow:hidden;width:100px } 
.roller div { width:100px;float:left } 
.roller:hover { width:200px } 

有點創意的三月杜松子酒/填充工作,你可以得到不同的結果。

此外,您可以使用first-child和/或下一個兄弟選擇器或其他。

0

純CSS可能是一個選項,但我想我會用Jquery處理顯示/隱藏,這樣我就可以對每個元素進行全面訪問。這樣一來,我可能有條件地顯示/隱藏元素基於登錄,會話等

Jquery How-To

你還是會想建立的div出包含您的圖標,並用CSS位置。背景更改也可以用Jquery處理,通過.css method

+0

如果用戶關閉了JS會怎麼樣? – Ben 2010-10-22 04:28:18

+0

坦率地說,我並不太擔心,如果用戶有js關閉..我的用戶是相對年輕和網絡精明。如果他們有js關閉然後擰他們,我不想要他們。但我喜歡這兩種方法。 – goddamnyouryan 2010-10-22 04:39:54

+0

@Steve,說實話,這不是一個比你想象的更重要的問題。另外,Jquery的顯示/隱藏功能是逐步增強的,因此那些「有問題的瀏覽器」的用戶將無法獲得增強功能。 – bpeterson76 2010-10-22 14:11:38