<!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>
css鼠标移入显示移出隐藏
最新推荐文章于 2024-07-21 20:35:12 发布