jQuery里鼠标事件的一些简单实现

最新推荐文章于 2022-07-19 19:33:25 发布

weixian52034

最新推荐文章于 2022-07-19 19:33:25 发布

阅读量475

点赞数 2

分类专栏： web前端文章标签： css 鼠标事件 over javascript jquery

本文链接：https://blog.csdn.net/weixian52034/article/details/52059091

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

自己无聊时写的一些小例子，目的是为了印证一些小细节。。供以后查看【查看时去掉单个是注释就行】

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQueryTest</title>
<style type="text/css">
	.highlight{
		background: #ff3300;
		font-size: 20px;
	}
</style>
<script src="jquery1.9.1.js" ></script> 
</head>

<body>
	<div id="panel">
		<h5 class="head">什么是jQuery</h5>
		<div class="content">
			jquery是继Prototype之后有一个邮箱的JavaScript。。。。。
		</div>
	</div>
	<button id="bt">请点击这里，来切换不同的背景颜色</button>
	<script type="text/javascript">

		/*//鼠标点击事件
		$(function(){
			$("#panel h5.head").bind("click",function(){
				var $content=$(this).next("div.content");
				if($content.is(":visible")){
					//$content.hide();
					$(this).addClass("highlight");

				}else{
					$content.hide();
				}
			});
		});*/


		/*//鼠标移动事件1 mouseover mouseout
		$("#panel h5.head").bind("mouseover",function(){
			$(this).next("div.content").show();
		});
		$("#panel h5.head").bind("mouseout",function(){
			$(this).next("div.content").hide();
		});*/


		/*//鼠标移动事件2 mouseover mouseout
		$("#panel h5.head").mouseover(function(){
			$(this).next("div.content").show();
		});
		$("#panel h5.head").mouseout(function(){
			$(this).next("div.content").hide();
		});
*/

		/*//鼠标的悬停事件 hover(函数1，函数2)
		$(function(){
			$(".head").hover(function(){
				$(this).next(".content").show().css("background-color","red");
			},function(){
				$(this).next(".content").hide();
			})
		});*/


		/*//鼠标连续单击事件 toggle() 这个方法有点诡异。。。
		$(function(){
			$("#panel h5.head").toggle(function(){
				$(this).next(".content").css("background-color","red");
			},function(){
				$(this).next(".content").css("background-color","green");
			});
		});*/



		/*这个方法有点诡异。。。  也可能是jquery的版本有点高  不支持。。
		$(function(){
		    $("#bt").toggle(function(){
		    $("body").css("background-color","green");},
		    function(){
		    $("body").css("background-color","red");},
		    function(){
		    $("body").css("background-color","yellow");}
		  	);
		});*/

	</script>
</body>
</html>