鼠标悬停到文本显示图片，怎么让图片跟随 Hello World的位置显示
<style>
.img-hover {
position: absolute;
width: 445px;
height: 270px;
display: none;
}
h1{
position: relative;
display:inline;
transition: all 0.7s ease;
}
h1:hover{
color: chartreuse;
cursor: pointer;
}
h1:hover + .img-hover{
display: block;
}
style>
<a>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA <h1>Hello Worldh1>
< img src="C:/Users/Xq/Desktop/s/go.png" class="img-hover" alt="">
根据你的代码，图片应该已经跟随Hello World的位置显示了。使用CSS中的绝对定位（position: absolute），并在鼠标悬停在文本上时（h1:hover），使用display: block来显示图片（.img-hover）。
除非你的HTML结构不正确，否则图片应该会在Hello World的位置显示，无论Hello World移动到页面的哪个位置，都应该跟随着的。
如果需要图片跟着文字的位置相对显示，那么必然得获取到文字的位置才行，可以在文字上添加mouseover事件，在其响应中设置图片的位置。
在你原有的代码基础上添加如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
position: relative; // 将父元素设置为相对定位，方便img的绝对定位
}
.img-hover{
position: absolute;
width: 445px;
height: 270px;
display: none;
}
h1{
position: relative;
display: inline-block;
transition: all 0.7s ease;
}
h1:hover{
color: chartreuse;
cursor: pointer;
}
h1:hover + .img-hover{
display: block;
}
</style>
</head>
<body>
<a>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</a> <h1>Hello World</h1>
<img src="./images/2.jpg" class="img-hover" alt="">
<script type="text/javascript">
const h1 = document.getElementsByTagName('h1')[0]; // 获取文字元素
const img = document.getElementsByClassName('img-hover')[0]; // 获取图片
h1.addEventListener('mouseover', (e) => {
const { screenX, screenY} = e; // 获取图片应当显示的位置
// 设置图片的位置
img.style.top = (screenY + h1.height) + 'px';
img.style.left = screenX + 'px';
})
</script>
</body>
</html>
您可以使用HTML和CSS来实现当鼠标悬停在文本上时显示图片并跟随文本位置移动。
首先，您需要在HTML中添加文本和图片元素。例如：
<p>鼠标悬停在这里</p>
<img src="your-image-url" id="hover-image">
接下来，您可以使用CSS将图片的显示属性设置为隐藏，并将其位置属性设置为绝对定位。例如：
#hover-image {
display: none;
position: absolute;
}
然后，您可以使用JavaScript添加鼠标悬停事件监听器。在事件处理程序函数中，您可以将图片的显示属性设置为块级显示，并计算出它应该在屏幕上的位置，并设置其位置属性。
以下是示例JavaScript代码：
var hoverText = document.querySelector('p');
var hoverImage = document.querySelector('#hover-image');
hoverText.addEventListener('mouseover', function() {
hoverImage.style.display = 'block';
});
hoverText.addEventListener('mousemove', function(e) {
hoverImage.style.left = e.clientX + 'px';
hoverImage.style.top = e.clientY + 'px';
});
hoverText.addEventListener('mouseout', function() {
hoverImage.style.display = 'none';
});
在上面的代码中，当鼠标悬停在文本上时，图片的显示属性将设置为块级显示。在mousemove事件处理程序函数中，计算出鼠标指针的位置，并设置图片的位置属性。在mouseout事件处理程序函数中，将图片的显示属性重新设置为隐藏。
请注意，您需要根据实际情况调整计算出的位置，并根据需要使用CSS样式更改图片的大小和其他属性。
以下答案由GPT-3.5大模型与博主波罗歌共同编写：
以上代码已经可以实现鼠标悬停到文本显示图片的效果，但是图片会出现在文本下方。要实现图片跟随Hello World的位置显示，可以将img的位置设置为相对于h1的绝对位置，并根据鼠标位置来调整img的位置。
下面是修改后的代码：
<style>
.img-hover {
position: absolute;
width: 445px;
height: 270px;
display: none;
}
h1{
position: relative;
display:inline;
transition: all 0.7s ease;
}
h1:hover{
color: chartreuse;
cursor: pointer;
}
h1:hover + .img-hover{
display: block;
}
h1:hover + .img-hover img {
position: absolute;
top: calc(100% + 5px);
left: 0;
transform: translateX(-50%);
}
</style>
<a>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA <h1>Hello World</h1>
<div class="img-hover"><img src="C:/Users/Xq/Desktop/s/go.png"></div>
解释：修改后的代码中，应该在img-hover div中添加img标签，并设置img的位置为相对于h1元素的绝对位置。设置top为h1元素的底部加5px，left为0，并通过transform: translateX(-50%)将img水平居中对齐。通过这种方式，图片就会跟随Hello World的位置显示。
如果我的回答解决了您的问题，请采纳！
要实现图片跟随 Hello World 的位置显示，可以将 .img-hover 的定位属性从 "absolute" 修改为 "relative"，并将 h1元素的 display 属性从 "inline" 修改为 "inline-block"。修改后的代码如下：
<style>
.img-hover {
position: relative;
width: 445px;
height: 270px;
display: none;
}
h1{
position: relative;
display:inline-block;
transition: all 0.7s ease;
}
h1:hover{
color: chartreuse;
cursor: pointer;
}
h1:hover + .img-hover{
display: block;
position: absolute;
top: 20px;
left: 50px; /* 根据需要调整图片的位置 */
}
</style>
<a>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA <h1>Hello World</h1></a>
<img src="C:/Users/Xq/Desktop/s/go.png" class="img-hover" alt="">
在上述代码中，通过设置 position: absolute、top 和 left 属性来控制图片的位置，使其跟随 Hello World 的位置移动。
内容来源与ChatGpt4及newbing和百度：
可以使用JavaScript实现鼠标悬停到文本时图片跟随的效果。具体思路如下：
- 给文本和图片分别设置一个id，方便后续获取元素。
- 监听文本的鼠标移入事件，获取文本的位置，并将图片的位置设置为文本的位置。
- 监听文本的鼠标移出事件，隐藏图片。
具体代码如下：
HTML部分：
<p id="text">Hello World</p>
<img id="img" src="your-image-url">
CSS部分：
#img {
position: absolute;
width: 445px;
height: 270px;
display: none;
}
JavaScript部分：
var text = document.getElementById("text");
var img = document.getElementById("img");
text.addEventListener("mouseover", function() {
var textRect = text.getBoundingClientRect();
img.style.display = "block";
img.style.left = textRect.left + "px";
img.style.top = textRect.top + textRect.height + "px";
});
text.addEventListener("mouseout", function() {
img.style.display = "none";
});
这样就可以实现鼠标悬停到文本时图片跟随的效果了。
祝您问题迎刃而解
如果你的html也是机器人写的，那么你的问题是？你的原本要求是？
该回答参考ChatGPT:
要让图片跟随文本的位置显示，可以使用CSS中的position属性和JavaScript来实现。具体步骤如下：
- 将图片作为绝对定位元素添加到文档中，并设置其display属性为none，以便最初不会显示。
- 使用JavaScript为鼠标悬停事件添加一个监听器，在鼠标悬停文本时显示图片，并将其位置设置为文本所在的位置。
- 在鼠标移动事件中更新图片的位置，使其始终与文本保持一致。
以下是一个简单的示例代码：
HTML:
<p id="text">Hello World</p>
<img id="image" src="example.jpg" alt="Example Image" style="display:none;">
CSS:
#image {
position: absolute;
}
JavaScript:
var textElement = document.getElementById("text");
var imageElement = document.getElementById("image");
textElement.addEventListener("mouseover", function(event) {
imageElement.style.display = "block";
imageElement.style.left = event.pageX + "px";
imageElement.style.top = event.pageY + "px";
});
textElement.addEventListener("mousemove", function(event) {
imageElement.style.left = event.pageX + "px";
imageElement.style.top = event.pageY + "px";
});
textElement.addEventListener("mouseout", function(event) {
imageElement.style.display = "none";
});
在上述代码中，我们使用绝对定位将图片放置在文档中，并在鼠标悬停事件中显示它。然后，我们使用鼠标移动事件来更新图片的位置，使其始终与文本保持一致。最后，在鼠标移开事件中隐藏图片。