[問題] div中放置數個div

看板Web_Design作者 (:)時間12年前 (2013/12/27 23:59), 編輯推噓3(3推 0噓 26→)
留言29則, 4人參與, 最新討論串1/1
各位版友好, 小弟想製作題目勾選的效果, 於是在外框<div>中置入圖片<img>與數個 代替按鈕的<div>, 不知道為什麼按鈕位置只有在CSS中div div{}下設定才行, 在ID下設定 都沒有作用, 而且僅出現一個按鈕(html的div中有兩個div), 請問有高手知道原因嗎? 請參考原始碼: http://jsfiddle.net/robenten/u4F2r/5/ 謝謝各位~ -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 36.224.52.38 ※ 編輯: robenten 來自: 36.224.52.38 (12/28 00:05)
推
12/28 00:50, , 1F
兩個按鈕都有出來，只是因為絕對位置的關係被放在同一個
12/28 00:50, 1F
→
12/28 00:51, , 2F
位置，我也不知道為什麼＃1st不能那樣寫，我也是新手...
12/28 00:51, 2F
推
12/28 02:35, , 3F
違反id命名規則
12/28 02:35, 3F
→
12/28 13:38, , 4F
嗯嗯 應該是id命名開頭不能使用數字 謝謝樓上兩位
12/28 13:38, 4F
→
12/28 13:39, , 5F
12/28 13:39, 5F
→
12/28 13:50, , 6F
不過使用first-child跟nth-child就不行了
12/28 13:50, 6F
→
12/28 13:50, , 7F
12/28 13:50, 7F
→
12/28 13:50, , 8F
有人知道原因嗎?
12/28 13:50, 8F
→
12/28 21:06, , 9F
12/28 21:06, 9F
→
12/28 22:17, , 10F
first-child是一個selector可以在CSS使用 請參考
12/28 22:17, 10F
→
12/28 22:18, , 11F
http://goo.gl/ySBnoN 有相關的介紹
12/28 22:18, 11F
→
12/28 22:23, , 12F
現在加上點選後可以改變按鈕顏色的功能, 不過在點選後
12/28 22:23, 12F
→
12/28 22:24, , 13F
取消mouseenter & mouseleave的顏色淡出效果
12/28 22:24, 13F
→
12/28 22:24, , 14F
12/28 22:24, 14F
→
12/28 22:25, , 15F
有人知道要如何辦到嗎? 困擾一整天了....
12/28 22:25, 15F
推
12/29 10:32, , 16F
有highlighted class的div就不觸發event
12/29 10:32, 16F
→
12/29 10:33, , 17F
$('div div:not(.highlighted)').mouseenter(...)
12/29 10:33, 17F
→
12/29 10:34, , 18F
而題目太多時會有效能問題，可以改將事件綁定到parent上
12/29 10:34, 18F
→
12/29 10:35, , 19F
假定題目div給他一個叫做 quiz 的 classname
12/29 10:35, 19F
→
12/29 10:36, , 20F
$('div.quiz').on('mouseenter', 'div:not(highlighted)',
12/29 10:36, 20F
→
12/29 10:36, , 21F
...);
12/29 10:36, 21F
→
12/29 10:40, , 22F
12/29 10:40, 22F
→
12/29 11:00, , 23F
再做了點修改，讓fadeTo動畫能即時反應事件
12/29 11:00, 23F
→
12/29 11:00, , 24F
12/29 11:00, 24F
→
12/29 23:55, , 25F
謝謝 s大 不過我把我的code加上not的條件後還是不行
12/29 23:55, 25F
→
12/29 23:55, , 26F
12/29 23:55, 26F
→
12/30 00:17, , 27F
恩 剛剛研究一下似乎一定要使用on() 因為ready()時
12/30 00:17, 27F
→
12/30 00:18, , 28F
所有的class都已經紀錄 所以toggleClass沒有作用
12/30 00:18, 28F
→
12/30 00:18, , 29F
謝謝提醒 :)
12/30 00:18, 29F
‣ 更多 robenten 的文章
文章代碼(AID): #1IlQFULv (Web_Design)