This article mainly introduces the method of using mouse events to achieve simple mouse passing effects. Friends who need it can refer to it
The code is super simple, there are not many BBs here, just give it
The code is as follows:
<!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>It is a very simple code, please refer to it and expand it freely. I hope you will like it.
The above is the detailed content of JS mouse event implements simple mouse passing effects. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
