40. jQuery-使用hover()方法切换事件

版权声明:本文为大都督作者的原创文章,未经 大都督 允许也可以转载,但请注明出处,谢谢! 共勉! https://blog.csdn.net/qq_37335220/article/details/85268015

1.效果图

在这里插入图片描述

2.html代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>40 jQuery-使用hover()方法切换事件</title>
      <style type="text/css">
           body{font-size:13px}
           .clsFrame{border:solid 1px #666;width:220px}
           .clsFrame .clsTitle{background-color:#eee;
           padding:5px;font-weight:bold}
           .clsFrame .clsContent{padding:5px;display:none}
    </style>
</head>
<body>
	<div class="clsFrame">
          <div class="clsTitle">hover方法</div>
          <div class="clsContent">
          	将鼠标移到标题时,自动显示内容;鼠标移出标题时,关闭显示的内容。
          </div>
    </div>
<script src="../jquery.min.js"></script>
<script type="text/javascript">
	//第二种方法
	$(function(){
		$(".clsTitle").hover(
				function() {
					$(".clsContent").show();
				},
				function() {
					$(".clsContent").hide();
				}
		);
	});
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_37335220/article/details/85268015