在懸停上使用CSS的漂亮效果

我在這裏發現了這個漂亮的漂亮效果 - http://www.red-team-design.com/wp-content/uploads/2011/04/css3-box-shadow.html。在懸停上使用CSS的漂亮效果

這裏就是一個副本 - http://jsfiddle.net/cyvvilek/cL7x6/3/

我想知道是否有什麼辦法讓懸停這種效果。我認爲，再加上一些CSS動畫會帶來不錯的效果。有一個重要的用途：之後和：以前在CSS所以它不能#box：之後：懸停或類似的東西:) 我聽說過在SASS或LESS中嵌套的東西的可能性.. 這可以單獨使用CSS完成？

THX

來源

2012-06-12 Cyvvilek

不幸的是，僞元素，如：後：目前還不能轉變之前。 SASS和LESS都可以編譯成CSS，所以在SASS或LESS的技術上都可以使用普通的CSS。

你可以做的是有一個單獨的元素（可能是div）頂部的陰影，並在懸停時淡入淡出。或者，您可以使用圖像。

來源

2012-06-12 22:08:11

因此，基本上是JavaScript或圖像...... CSS很糟糕，沒有像下面這樣的選項：＃div1：hover {＃div2：（visibility：hidden）}當你將鼠標懸停在另一個元素上時，用一個元素做某事。。：/謝謝 – Cyvvilek

CSS確實有這種功能 - 不需要javascript。使用僞元素如：after和before之前的問題就是它們的屬性不能用轉換動畫。如果您使用像drale2k建議的真實元素，您只需使用CSS即可實現。看看 - > http://jsfiddle.net/joplomacedo/cL7x6/8/ – banzomaikaka

你可以像使用其他選擇器一樣使用'#box：hover'：'#box>＃box_child' targets'＃box'的小孩'＃box_child'。 '＃box：hover>＃box_child'在'＃box'懸停時定位'＃box'的小孩'＃box_child'。 '＃box1：hover +＃box2'以'＃box1'懸停時的相同方式定位'＃box1'的鄰接兄弟'＃box2'。 – banzomaikaka

在懸停上使用CSS的漂亮效果

回答

相關問題