css鼠标移入显示移出隐藏

最新推荐文章于 2023-08-22 22:04:03 发布

Ccoolor

最新推荐文章于 2023-08-22 22:04:03 发布

阅读量2.7k

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/as965874/article/details/112983556

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>鼠标事件</title>
	<style>
		#imgId {
			width: 60px;
			height: 60px;
			display: block
		}

		#butId {
			float: right;
			border-radius: 4px;
		}
	</style>
	<script>
		function hiddenImg(x) {
			var oDiv = document.getElementById("butId");
			oDiv.style.visibility = "hidden";
			document.getElementById("butId").innerHTML = '复制'
		}

		function showImg(x) {
			var oDiv = document.getElementById("butId");
			oDiv.style.visibility = "visible";
		}

		function handleClick() {
			document.getElementById("butId").innerHTML == '复制' ? document.getElementById("butId").innerHTML = '复制成功' :
				document
				.getElementById("butId").innerHTML = '复制'

		}
	</script>
</head>

<body>
	<div onmouseover="showImg(this)" onmouseout="hiddenImg(this)"
		style='width:200px;height:200px;padding:5px;background:black'>
		<button id="butId" onclick='handleClick()'>复制</button>

	</div>
	<p>函数 showImg() 在鼠标指针移动入黑色区域时触发。</p>
	<p>函数 hiddenImg() 在鼠标指针移出黑色区域时触发.</p>

</body>

</html>

Ccoolor

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css鼠标移入显示移出隐藏

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>鼠标事件</title> <style> #imgId { width: 60px; height: 60px; display: block } #butId { float: right; border-radius: 4px; } </s
复制链接

扫一扫