题目描述
题目来源及自己的思路
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 150px;
border: 10px solid #333;
display: flex;
justify-content: space-evenly;
align-items: center;
margin: 30px auto;
/* position: relative; */
}
p {
width: 100px;
height: 100px;
}
img {
width: 100%;
height: 100%;
display: block;
}
span {
position: fixed;
/* top: 0;
left: 0; */
width: 288px;
height: 180px;
display: none;
}
</style>
</head>
<body>
<div class="box">
<p><img src="1.png" alt="" /></p>
<p><img src="2.png" alt="" /></p>
<p><img src="3.png" alt="" /></p>
<span>
<img src="1.png" alt="" />
</span>
</div>
<script>
var ipImg = document.querySelectorAll("p>img");
var spImg = document.querySelector("span>img");
var box = document.querySelector(".box");
for (var i in ipImg) {
ipImg[i].onmouseenter = function () {
console.log(this.src);
spImg.innerText = `<img src='${this.src}'>`;
spImg.style.display = "block";
}
ipImg[i].onmouseleave = function () {
spImg.style.display = "none";
}
}
box.onmouseenter = function (e) {
var x = e.pageX;
var y = e.pageY;
spImg.style.left = x + 10 + "px";
spImg.style.top = y + 10 + "px";
}
</script>
</body>
</html>
你期待的结果是什么？实际看到的错误信息又是什么？
极客观点
项目管理
HarmonyOS
1.你这个代码 span display: none;这就有问题了,你的js改变的span下面的img 这回导致你怎么改都不会来
我修改过的代码请移步这里test