按钮

最新推荐文章于 2024-03-22 09:40:17 发布

原创最新推荐文章于 2024-03-22 09:40:17 发布 · 169 阅读

CC 4.0 BY-SA版权

本文介绍了一个简单的HTML页面如何使用JavaScript实现鼠标悬停效果、元素显示隐藏及样式更改等功能。通过具体的代码示例，展示了如何利用jQuery简化这些操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>日考5</title>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
	.play {
	height: 20px;
	width: 20px;
	position: relative;
	right: 70px;
	bottom: 100px;
	display: none;
	}

	.img0 {
	height: 200px;
	transition: all 2s;
	}

	.img0:hover {
	box-shadow: 2px 2px 1px red;
	transform: scale(1.2);
	}
	</style>
	</head>

	<body>
	<div class="wrap" onmouseover="method()" onmouseleave="method2()">
	<img src="img/a8.jpg" class="img0" />
	<img src="img/a7.jpg" class="play" id="id0"/>
	<div class="txt" id="txt">
	hello
	</div>
	</div>
	<script type="text/javascript">
	function method() {
	//alert("dd");
	$("#id0").show();
	$("#txt").css({"color":"blue"});
	}
	function method2(){
	$("#id0").hide();
	$("#txt").css({"color":"black"});
	}
	</script>
	</body>

	</html>