常用的鼠标事件方法

最新推荐文章于 2025-06-21 16:50:39 发布

原创最新推荐文章于 2025-06-21 16:50:39 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

一.鼠标单击事件

方法:click()

例子:

<html>
<head>
<title>鼠标单击事件.html</title>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(function() {
		$("input").click(function() {
			alert('我是鼠标单击后显示出来结果');
		});
	});
</script>

</head>

<body>
	<input type="button" value="确定">
</body>
</html>

二.鼠标指针移过时

方法:mouseover()

例子:

<html>
  <head>
    <title>主导航特效</title>
    <style type="text/css">
    .yan{
    list-style: none;
    }
    div{
    width: 150px;
    line-height: 30px;
    
    }
    </style>
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
	<script type="text/javascript">
	$(function(){
	
	$("li").addClass("yan");
	 $(".a li").mouseover(function(){
	 $(this).css({"background":"red"});
	 });
	});
	</script>
 
  </head>
  
  <body>
    <div>
    <ul class="a">
    <li>首页</li>
    <li>服装城</li>
    <li>电器城</li>
    <li>易购超市</li>
    <li>易购团</li>
    </ul>
    </div>
 
  </body>
</html>

三.鼠标移除时

方法:mouseout()

例子:

<html>
  <head>
    <title>主导航特效</title>
    <style type="text/css">
    .yan{
    list-style: none;
    }
    div{
    width: 150px;
    line-height: 30px;
    
    }
    </style>
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
	<script type="text/javascript">
	$(function(){
	
	$("li").addClass("yan");
	 $(".a li").mouseover(function(){
	 $(this).css({"background":"red"});
	 });
	 $("li").mouseout(function(){
	 $(this).css({"background":""});
	 });
	});
	</script>
  

  </head>
  
  <body>
    <div>
    <ul class="a">
    <li>首页</li>
    <li>服装城</li>
    <li>电器城</li>
    <li>易购超市</li>
    <li>易购团</li>
    </ul>
    </div>
 
  </body>
</html>