作者superpai (超級白)
看板Web_Design
標題Re: [問題] CSS:hover 後更改其他class的屬性
時間Tue Sep 10 11:12:04 2013
※ 引述《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)
1F：→ superpai:PS. 我懶得寫prefix 自行用有支援的瀏覽器開吧 09/10 11:15
2F：→ danny8376:OwO 還有~這個selector啊 09/10 20:17
3F：推 beerson:感謝s大!我之前不知道有~這個SELECTOR! 09/12 02:56
4F：推 lom123456:~ 很好用的selector 但也很容易被忘記XD 09/13 11:16
5F：→ lom123456:想到事件就會直接想到js了嘛(菸) 09/13 11:16