用CSS實現開心網標籤詞顏色漸變觀點互動

開心網**後面有乙個標籤式的短評觀點互動效果，這種效果的精髓與qq好友印象是很接近的。如下圖：

如果短評文字個數超過一定的長度，後面一些文字會被省略，以三角形式呈現。滑鼠經過，則顯示完整的文字內容，三角消失，如下截圖：

我們小心翼翼地開啟小bug一看其html的廬山真面目，結果發現標籤n多，層級也n複雜，且互動效果貌似是js這個幕後**（非借助css），而且考慮到開心網的這個效果文字經常會出現一半被截斷不可見的情況：

我這人很懶的，最怕麻煩，最怕折騰了，加上小三角又是使用背景實現的，這有悖頁面重構之無準則，顯然，如此殘害時間與腦細胞的實現方法打死我也是接受不了的。於是身體力行，整出了個相對不錯的方法，通過純css實現類似效果與互動的方法。於是在這裡分享下，這也就是本文的內容了。

效果搶鮮，您可以狠狠地點選這裡：純css下短評式互動demo

效果截圖如下：

滑鼠移到第乙個有三角模樣標籤上效果如下：

哇哈哈，從效果上來講，基本上ok的啦，普通字元文字自然安分守已，有小三角文字hover上去，會顯示完整文字內容。沒有什麼移位啊，身體不適之類的。沒有任何的js做推手，全部css挑大樑實現的，而且一直讓人蛋疼的ie6瀏覽器下效果也是很ok的！

那麼實現上呢？是否簡單，是否易懂，是否易操作呢？

我們拿demo頁中的第乙個標籤詞舉例吧，其完整html如下：

暴力女，虐男癖暴力女，虐 ◆

從html中內容估計可以略知原理一二了。

如果我們是長度沒有超過限制的標籤詞，例如demo頁中的第二個標籤詞「成熟大氣」，則html非常簡單，就是單單的一層標籤：

成熟大氣

如果寬度超出限制，為了顯示的需要，我們需要兩段文字內容，一段是閹割版的，用做預設的顯示；另外一段就是完整的文字內容，用做滑鼠經過的顯示。文字的擷取由後台控制與輸出，這很容易實現的，我們前台不予以擔心與考慮。

在

暴力女，虐男癖暴力女，虐 ◆

這行html中：

這部分暴力女，虐男癖表示的就是完整文字段；

暴力女，虐就是閹割文字段；

空格作用是為了撐開點距離（為了讓**看上去更直觀，上面那行**直接打空格了）；

◆則是使用字元技術生成的三角。

這就是css實現標籤詞互動的html內容結構，我想，這要比開心的做法要淺顯易懂的多吧。

無論是文字安分還是文字溢位，外部標籤的類名的impress_c1, impress_c2等都是用來控制顯示的背景顏色的，一般居前的標籤詞比重大，顏色深。

為了兼顧ie6下的hover效果，最外層標籤需要是a標籤。本方法三角字元產生，直接可以使用css的color屬性控制顏色，所以，您要是想應用此實現方法的話，替換風格什麼的都是非常簡單的，改改背景色，顏色就可以了，很輕鬆很愜意的。

至於css**中具體樣式的含義和作用您就不必關心了，估計也沒人去關心，直接用就可以了，不過可以提下，hover上去顯示完整文字借助的absolute絕對定位實現的。

**：