使用 jquery 實現 css hover 長期維持效果

Incimo發表於2020-11-27

1、首先定義 hover 效果

.base-style:hover{
	color: red
}

2、在上面的 hover 上新增一個樣式一模一樣的效果樣式

.base-style-active,
.base-style:hover{
	color: red
}

3、使用 jquery 判斷 .base-style是否觸發了 hover,如果觸發了就給他加上.base-style-active樣式,這樣觸發的hover樣式就得到了保留。

 $('.base-style').mouseenter(function(){
	$(this).addClass('base-style-active')
})

4、如果想要實現 hover 單選效果,則需要在每次加上.base-style-active樣式之前,將所有後續列表div中的.base-style-active樣式清除

 $('.base-style').mouseenter(function(){
    $('.候選列表').removeClass('base-style-active')
	$(this).addClass('base-style-active')
})

比如這樣:
在這裡插入圖片描述

相關文章