jquery 列表hover效果，css :hover ，jquery 事件委托，jquery hover()方法

jquery 列表hover效果

<ul class="list"><li class="item"><span>1</span><span class="select">只改变我</span></li><li class="item"><span>2</span><span class="select">只改变我</span></li><li class="item"><span>3</span><span class="select">只改变我</span></li>
</ul>

css实现

.item:hover {color: red
}
//只改变某一个子元素
.item .select:hover {color: red;
}

jquery事件委托

$('.list').on("mouseenter mouseleave",".item",function(event){if (event.type === 'mouseenter') {$(event.target).css('color','red')} else {$(event.target).css('color','black')}
})
//只改变某一个子元素
$('.list').on("mouseover mouseout", ".item",function(event){if (event.type === 'mouseover') {$(event.currentTarget).find('.select').css('color','red')} else {$(event.currentTarget).find('.select').css('color','black')}
})

jquery hover()方法

$('.item').hover(function(){$('.item').eq($(this).index()).css('color','red')},function(){$('.item').eq($(this).index()).css('color','black')
})
//只改变某一个子元素
$('.item').hover(function(){$('.item').eq($(this).index()).find('.select').css('color','red')},function(){$('.item').eq($(this).index()).find('.select').css('color','black')
})

jquery 列表hover效果，css :hover ，jquery 事件委托，jquery hover()方法相关推荐

html hover 效果,CSS八种让人眼前一亮的HOVER效果的示例代码
一.发送效果HTML // 这里是一个svg的占位 Send CSS #send-btn{ display: flex; align-items: center; justify-content: c ...
8种让人眼前一亮的hover效果--CSS
文章目录一.CSS是什么? 二.使用步骤一.发送效果二.霓虹效果三.边框效果四.圆形效果五.圆角效果六.冰冻效果七.闪亮效果八.加载效果总结一.CSS是什么? CSS 是用来编写 ...
html5 点击事件委托,jquery事件委托
一,.on( events [, selector ] [, data ], handler(eventObject) )// .on( events [, selector ] [, data ] ...
JavaScript中的经典题型（类数组、CSS Sprites、事件委托、经典去重、原型链、闭包、深浅克隆、附带思路流程和源码）
JavaScript中的经典题型一.JavaScript中的经典题型 1..如何判断一个数组和类数组? 首先要明白什么是类数组. 类数组:类数组是一个普通对象,他的原型是Object.而真实的数组是 ...
css的hover效果跟js单击事件发生冲突
就比如现在这种情况你可以让他实现点击密码登录可以切换样式啦 ,但是你上面写的css样式不实现啦!!! 这个时候你就让你上面的css样式后面加上 !important 这是最简单的解决办法如果我这 ...
移动端css hover效果,css移动端:acitve效果的实现
做移动前端也有一些日子了,一直有个问题没有解决,就是与pc端那样的一个:hover的效果,:hover是鼠标指针浮动在其上的元素的一个选择器,但因为在移动端是没有鼠标的,代替的是触摸屏,用户也不是有& ...
html 气泡动画效果,CSS 动画实现动态气泡背景的方法
今天是节后上班第一天,早上醒来一睁眼,嗯?啊...?什么...?这是哪?我是谁?上什么班? 然鹅,还是被昨晚特意设置的八个闹钟:alarm_clock:吵醒,冬天早上起床的难度...想必各位都心有体会 ...
html hover效果下拉个框,CSS实现Hover下拉菜单的方法
老规矩,今天来讲一个很实用的css效果,当鼠标移到按钮的时候就会自动显示下拉菜单.效果如下: 很简单的一个小demo,实现步骤如下: 首先定义一个大的div包裹一个button和一个a链接组分别设置d ...
15款JQuery图片展示效果插件
在图片展示的效果中,滑动门和幻灯片放映在这几年的web页面中越来越流行了,随着jQuery的流行趋势渐增,更多的开发者都致力于创建惊人的,多用途的,时髦的jquery图片展示效果.真的要感谢jQuer ...
jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单
jquery折叠菜单.jquery侧边栏菜单.CSS侧边栏菜单一.Jquery折叠菜单效果二.jquery侧边栏菜单效果三.CSS侧边栏菜单效果先上代码 <!DOCTYPE html&g ...

jquery 列表hover效果，css :hover ，jquery 事件委托，jquery hover()方法

jquery 列表hover效果

jquery 列表hover效果，css :hover ，jquery 事件委托，jquery hover()方法相关推荐

最新文章

热门文章

jquery 列表hover效果 ，css :hover ，jquery 事件委托，jquery hover()方法

jquery 列表hover效果

jquery 列表hover效果 ，css :hover ，jquery 事件委托，jquery hover()方法相关推荐

最新文章

热门文章

jquery 列表hover效果，css :hover ，jquery 事件委托，jquery hover()方法

jquery 列表hover效果，css :hover ，jquery 事件委托，jquery hover()方法相关推荐