当鼠标悬停在某些文本上时，如何使图像出现（并随光标移动）？我还需要图像位于被悬停的文本下方，但位于所有其他文本之上。你可以在这里看到一个例子 - http://spab-rice.com/wordpress/vavo/demo/home-minimal/
我可以在悬停时显示背景图片，但这让我很困惑。
【问题讨论】：
您可以尝试显示的 div 元素上的 z-index 属性。
它基本上在屏幕上创建图层。在这里查看文档https://www.w3schools.com/cssref/pr_pos_z-index.asp
我尝试检查您在问题中链接的网站上的元素，它的 z-index 为 4。每行都是一个 div 元素，它会根据悬停位置更改 z-index。
希望这可以帮助您朝着正确的方向前进。
【讨论】：
你可以在你需要在下面的元素中使用z-index，对于你需要悬停的文本，你可以使用带有javascript的onmousehover事件，你可以使用display: none;为图像添加一个类属性进行隐藏，然后在鼠标悬停时删除带有classList.remove() 的类，希望这有帮助
【讨论】：
您可以使用javascript的鼠标悬停功能而不是悬停，因为如果文本和图片之间没有关系，则很难在悬停的文本上显示图片，而在javascript中您可以轻松更改CSS属性。此外，要从顶部/底部更改图片和文本的对齐方式，您可以使用 DOM Style zindex 将图像置于顶部或底部。如果您想进一步澄清，请在评论中提问。谢谢
【讨论】：
在整页中运行代码
终于成功了-： 我使用鼠标位置作为图像的位置，使它们随光标移动。唯一剩下的是从顶部或底部对齐，我认为您将使用 z-index 添加。或者，如果您愿意，可以在这里学习 - https://www.w3schools.com/jsref/prop_style_zindex.asp。 我的代码如下，您只需将图像（div）的背景更改为您的愿望。 我希望这是您所期望的代码。。谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
}
.text1,.text2,.text3{
position: relative;
margin: 0px 100px;
background-color: red;
width: 100px;
height: 200px;
}
.text2{
background-color: yellow;
}
.text3{
background-color: lawngreen;
}
.text1{
margin-top: 100px;
}
.image1{
position: absolute;
width: 300px;
height: 300px;
background: green;
border-radius: 50%;
display: none;
transition: 0.5s linear;
}
.image2{
position: absolute;
width: 300px;
height: 300px;
background: red;
display: none;
transition: 0.5s linear;
border-radius: 50%;
}
.image3{
position: absolute;
width: 300px;
height: 300px;
background: blue;
display: none;
transition: 0.5s linear;
border-radius: 50%;
}
</style>
<div class="text1" id="focusArea" onmouseover='display()'onmousemove="getPos(event)" onmouseout="stopTracking()"><span>This is text 1.</span></div>
<div class="text2" id="focusArea2" onmouseover='display()'onmousemove="getPos2(event)" onmouseout="stopTracking2()"><span>This is text 2.</span></div>
<div class="text3" id="focusArea3" onmouseover='display()'onmousemove="getPos3(event)" onmouseout="stopTracking3()"><span>This is text 3.</span></div>
<div class="image1" id="image1"></div>
<div class="image2" id="image2"></div>
<div class="image3" id="image3"></div>
<p id="displayArea"></p>
<p id="displayArea2"></p>
<p id="displayArea3"></p>
<script>
function getPos(e){
x=e.clientX;
y=e.clientY;
cursor="Your Mouse Position Is : " + x + " and " + y ;
document.getElementById("displayArea").innerHTML=cursor;
document.getElementById('image1').style.display='block';
document.getElementById('image1').style.top=y-50+'px';
document.getElementById('image1').style.left=x+100+'px';
}
function stopTracking(){
document.getElementById("displayArea").innerHTML="";
document.getElementById('image1').style.display='none';
}
function getPos2(e){
a=e.clientX;
b=e.clientY;
cursor2="Your Mouse Position Is : " + a + " and " + b ;
document.getElementById("displayArea2").innerHTML=cursor2;
document.getElementById('image2').style.display='block';
document.getElementById('image2').style.top=b-50+'px';
document.getElementById('image2').style.left=a+100+'px';
}
function stopTracking2(){
document.getElementById("displayArea2").innerHTML="";
document.getElementById('image2').style.display='none';
}
function getPos3(e){
u=e.clientX;
v=e.clientY;
cursor3="Your Mouse Position Is : " + u + " and " + v ;
document.getElementById("displayArea3").innerHTML=cursor3;
document.getElementById('image3').style.display='block';
document.getElementById('image3').style.top=v-50+'px';
document.getElementById('image3').style.left=u+100+'px';
}
function stopTracking3(){
document.getElementById("displayArea3").innerHTML="";
document.getElementById('image3').style.display='none';
}
</script>
</body>
</html>【讨论】：