作者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