提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

使用mouse事件实现简单的鼠标经过特效

事件 实现 使用 简单 鼠标 特效 经过
2023-06-13 09:15:43 时间

代码超级简单，这里就不多BB了，直接奉上

复制代码代码如下:


<!doctypehtml>
<htmllang="zh-cn">
<head>
   <metacharset="UTF-8">
   <title>Document</title>
   <styletype="text/css">
   body,ul,li{margin:0;padding:0;list-style:none}
   ulli{width:100px;height:100px;border:1pxsolid#f00;float:left;margin:50px10px;background-color:#ffffff;}
   ulli.current{border:1pxsolid#dfdfdf;background-color:#ff0000;}
</style>
<scripttype="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>
<scripttype="text/javascript">
   $("ulli").mouseover(function()
   {
        $(this).addClass("current");
   }).mouseout(function()   
   {
       $(this).removeClass("current");       
   });
</script>

非常简单的代码，小伙伴们参考下，自由扩展，希望大家能够喜欢。

相关文章