使用mouse事件实现简单的鼠标经过特效
更新时间：2015年01月30日 10:33:10 投稿：hebedich
这篇文章主要介绍了使用mouse事件实现简单的鼠标经过特效的方法,需要的朋友可以参考下
代码超级简单，这里就不多BB了，直接奉上
复制代码 代码如下:
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li{margin:0; padding:0; list-style:none}
ul li{width:100px; height:100px; border:1px solid #f00; float:left; margin:50px 10px; background-color:#ffffff;}
ul li.current{border:1px solid #dfdfdf; background-color:#ff0000;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>
<body>
<h1>鼠标经过下面的块</h1>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<script type="text/javascript">
$("ul li").mouseover(function()
{
$(this).addClass("current");
}).mouseout(function()
{
$(this).removeClass("current");
});
</script>
非常简单的代码，小伙伴们参考下，自由扩展，希望大家能够喜欢。
您可能感兴趣的文章:
- 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
- js实现图片显示局部，鼠标经过显示全部的效果
- Javascript实现的鼠标经过时播放声音
- 鼠标经过导航菜单时颜色改变效果
- javascript学习笔记（二） 鼠标经过时，改变div块的背景色的代码
- javascript中onmouse事件在div中失效问题的解决方法
- jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
- 鼠标经过显示二级菜单js特效
- CSS鼠标响应事件经过、移动、点击示例介绍
- jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
- jquery给图片添加鼠标经过时的边框效果
- jquery简单实现鼠标经过导航条改变背景图
- 鼠标经过tr时,改变tr当前背景颜色
- Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
- jq实现酷炫的鼠标经过图片翻滚效果
- jQuery 鼠标经过(hover)事件的延时处理示例
相关文章
这篇文章主要介绍了微信小程序中实现轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
这篇文章主要给大家介绍了关于JavaScript中this指向问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
今天小编就为大家分享一篇关于js根据需要计算数组中重复出现某个元素的个数，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了微信小程序播放背景音乐,实现原理是通过wx.getBackgroundAudioManager获取全局唯一的背景音频管理器，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2022-01-01
这篇文章主要给大家介绍了关于微信小程序新手教程之页面打开数量限制的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
JavaScript累加、迭代、穷举、递归等常用算法实例小结
这篇文章主要介绍了JavaScript累加、迭代、穷举、递归等常用算法,结合实例形式分析了javascript累加、迭代、递推、穷举等算法的相关实现技巧与注意事项,需要的朋友可以参考下2018-05-05
正则表达式是用于匹配字符串中字符组合的模式,下面这篇文章主要给大家介绍了一次JavaScript正则的诡异经历记录,文中通过实例介绍的非常详细,需要的朋友可以参考下2022-04-04
新发现一个骗链接的方法(js读取cookies)，需要的朋友可以参考下。2012-01-01
这篇文章主要为大家详细介绍了微信小程序数据存储与取值的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
看到这种百叶窗效果的动画，以为是用flash做的，下面通过本文给大家介绍基于JavaScript实现百叶窗动画效果，需要的朋友参考下吧2016-02-02
最新评论