Re: [問題] CSS:hover 後更改其他class的屬性

看板Web_Design作者 (超級白)時間12年前 (2013/09/10 11:12), 編輯推噓2(203)
留言5則, 4人參與, 最新討論串2/2 (看更多)
※ 引述《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
PS. 我懶得寫prefix 自行用有支援的瀏覽器開吧
09/10 11:15, 1F

09/10 20:17, , 2F
OwO 還有~這個selector啊
09/10 20:17, 2F

09/12 02:56, , 3F
感謝s大!我之前不知道有~這個SELECTOR!
09/12 02:56, 3F

09/13 11:16, , 4F
~ 很好用的selector 但也很容易被忘記XD
09/13 11:16, 4F

09/13 11:16, , 5F
想到事件就會直接想到js了嘛(菸)
09/13 11:16, 5F
文章代碼(AID): #1IBeuB_F (Web_Design)
文章代碼(AID): #1IBeuB_F (Web_Design)