Re: [問題] CSS:hover 後更改其他class的屬性
※ 引述《beerson (啤酒僧)》之銘言:
: 最近在練習網頁排版,順便增加一點特效
: 特效內容是當滑鼠滑過某個div時,將令兩個div分別顯示為display:block和display:hidden,目前我是用jQuery的hide()和fadeIn()函試來操作,是可以達到效果,但是總覺得這種簡單的特效應該可以使用純css來表達吧?
: 第一個想法是用hover元素改變其他的class來作成效果,但我不知道要怎麼寫......@@所以來請教版上神人們~~~
: 此外css能不能做到fadeIn()的效果呢~?
: 感謝各位指教嚕!!
1. fadeIn() 的動畫效果用 transition: all 1s 讓opacity 平滑漸變
有一樣的效果
2. hover 元素改變其他的class 可以用jQuery 的 addClass() 來做
3. 全用CSS達成目前條件是可能的
http://jsfiddle.net/NyuBe/1/
<div class="trigger box">Trigger</div>
<div class="hidden box transition">fade in</div>
<div class="show box transition">to hide</div>
滑鼠移到 .trigger上時,.hidden會出現,.show會消失
(沒有子元素 沒有子元素 完全沒有子元素)
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.230.69.95
※ 編輯: superpai 來自: 61.230.69.95 (09/10 11:14)
→
09/10 11:15, , 1F
09/10 11:15, 1F
→
09/10 20:17, , 2F
09/10 20:17, 2F
推
09/12 02:56, , 3F
09/12 02:56, 3F
推
09/13 11:16, , 4F
09/13 11:16, 4F
→
09/13 11:16, , 5F
09/13 11:16, 5F
討論串 (同標題文章)
本文引述了以下文章的的內容:
完整討論串 (本文為第 2 之 2 篇):