網頁前端hover問題

hover checked checkbox jquery 網頁前端

pei199520 2019-02-13 15:26:24 ‧ 2736 瀏覽

分享至

以checkbox設計了一個元件
並用label去顯示(隱藏原生checkbox樣式)

我希望能達到
移入元件的時候顯示a圖片
移出時顯示b圖片
若使用者點擊則會使checked==true，並顯示c圖片
又若該元件已符合checked==true，則移入移出不會有更換圖片的動作
(維持顯示c圖片)

目前用mouseover和mouseout搭配checkbox的.prop('checked')做判斷及設定
但在使用操作上ui仍然不能照我想要的顯示
請問各位高手，該用什麼方法達成我的目標？

看更多先前的討論...收起先前的討論...

pei199520 iT邦新手 5 級 ‧ 2019-02-13 15:39:04 檢舉

剛剛試出來了...
不好意思造成大家困擾，但好像不能刪文
我把我的方法貼過來，讓大家看看是否有其他想法或可以改善的空間
這邊是用把圖片寫在css背景並用class替換的方式進行
$('#divName').on('mouseover', '.btn-checkbox+label', function () {
if (!$(this).prev().prop('checked')) {
$(this).addClass('checkbox-hover');
}
$('#divName').on('click', '.btn-checkbox+label', function () {
if (!$(this).prev().prop('checked')) {
$(this).addClass('checkbox-checked');
$(this).removeClass('checkbox-hover')
} else {
$(this).removeClass('checkbox-checked');
$(this).addClass('checkbox-hover');
}
});
});
$('#divName').on('mouseout', '.btn-checkbox+label', function () {
$(this).removeClass('checkbox-hover');
});

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-02-13 16:58:17 檢舉

其實，你搞的有點複雜就是了。

如果說checkbox元件可以與img上同一盒子的話。那就簡單多了。
你可以搭配 :checked 這個css的特性來達到你想要的效果。
不需要用class操作處理。

這邊給你一個應用的方式讓你學習
https://wcc723.github.io/css/2013/10/07/css-chechbox/

再搭合hover的話就更美好了

pei199520 iT邦新手 5 級 ‧ 2019-02-13 17:11:57 檢舉

哈哈對呀，好像新手都容易把問題搞得很複雜...

我原先有嘗試過css的:checked和:hover
但我發現他們之間會互相衝突
比如我已經checked了，可是在hover的時候還是會有hover的效果
(我希望在checked之後就不要有hover效果)
所以我才想說用JQuery來控制看看

但又因為我的元件是動態生成的
所以又寫得更複雜了...

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-02-13 17:36:46 檢舉

你的 hover 跟 checked其實是同效果才對。
把它放在一起就行了。

除非你要做動畫的方式。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

cn41408

iT邦新手 5 級 ‧ 2019-02-13 18:04:52

最佳解答

不透過js也是可以的

[html]

<label>
  <input type="checkbox" id="test" name="test" />
  <img id="image_a"/>
  <img id="image_b"/>
  <img id="image_c"/>
</label>

[css]

input#test,
img[id^=image_] {
  display: none;
}

label:hover > 
  input#test:not(:checked) ~ img#image_a,
label:not(:hover) > 
  input#test:not(:checked) ~ img#image_b,
label > 
  input#test:checked ~ img#image_c
{
  display: block;
}