使用 jquery 實現 css hover 長期維持效果
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')
})
比如這樣:
相關文章
- 用js(hover )+css實現下拉框效果(有效果圖)JSCSS
- CSS3實現偽類hover離開時平滑過渡效果CSSS3
- 兩種純CSS方式實現hover圖片pop-out彈出效果CSS
- CSS: hover選擇器的使用(實現滑鼠懸浮效果,滑鼠移上去div顯示)CSS
- 如何不使用js實現滑鼠hover彈出選單效果JS
- jquery和css實現的圓形鐘錶效果jQueryCSS
- jQuery和css3實現的電子錶效果jQueryCSSS3
- Hover.css:一組超實用的 CSS3 懸停效果和動畫CSSS3動畫
- jQuery:hover延時效果的一些處理jQuery
- jQuery hover事件jQuery事件
- 使用 Sass mixin 實現 CSS 的居中效果CSS
- jquery和css3實現的動態時鐘效果jQueryCSSS3
- jQuery和css3實現的摩天輪旋轉效果jQueryCSSS3
- css3和jQuery實現的點選出現波紋效果CSSS3jQuery
- css 實現打分效果CSS
- jQuery實現輪播效果jQuery
- 一個有意思的CSS圖片hover效果CSS
- jquery和css3實現的巴西里約奧運火炬效果jQueryCSSS3
- 使用純 CSS 實現滾動陰影效果CSS
- 使用CSS background實現炫酷懸停效果CSS
- css3實現不斷延長的斜線效果CSSS3
- CSS實現鏤空效果CSS
- CSS 如何實現羽化效果?CSS
- 純 CSS 實現波浪效果!CSS
- jQuery 實現淡入淡出效果jQuery
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- 【譯】使用CSS Transitions實現圓形懸停效果CSS
- 使用CSS實現逼真的水波紋點選效果CSS
- 基於jquery實現穿梭框效果jQuery
- jQuery 實現checkBox全選效果jQuery
- 純 CSS 實現斜紋效果CSS
- 用css實現視差效果CSS
- CSS實現footer“吸底”效果CSS
- 純CSS實現液晶字型效果CSS
- css如何實現div全屏效果CSS
- CSS如何實現柱狀效果CSS
- css3實現翻牌效果CSSS3
- css實現氣泡框效果CSS