<分区>
标签 javascript jquery html css
<分区>
我试图在鼠标悬停在照片上时显示一些内容。但是，如果不移动图像下方页面上的其余内容，我很难做到这一点。在不使用 margin-top: -22% 的情况下，悬停时在前 3 个图像正下方显示内容的可能解决方案是什么？
附件是网站的链接:http://aswanson.net/ConnectWithTrainingHomePage/MyHomePage.html
<!Doctype html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="MyHomePage.css">
</head>
<body>
<img class="cnetheader" src="cnetheader.png" alt="cnetheader" height="100%" width="100%">
<img class="searchBar" src="searchBar.png" alt="cnetheader" height="100%" width="50%">
<img class="eCommerce" src="eCommerce.png" alt="cnetheader" height="100%" width="92%">
<img class="freelancer" src="freelancer.png" alt="cnetheader" height="100%" width="100%">
<img class="photoHeader" src="photoHeader.png" alt="cnetheader" height="100%" width="100%">
<img src="photos2.png" width="100%" height="100%" border="0" usemap="#map" />
<map name="map">
<div class="photo1">
<area shape="rect" coords="63,13,451,260" href="https://www.google.com" />
<div class="photo1-content">
Only show when hovering
</div>
</div>
<div class="photo2">
<area shape="rect" coords="481,13,870,258" href="https://www.google.com" />
<div class="photo2-content">
Only show when hovering
</div>
</div>
<div class="photo3">
<area shape="rect" coords="900,12,1290,258" href="https://www.google.com" />
<div class="photo3-content">
Only show when hovering
</div>
</div>
<div class="photo4">
<area shape="rect" coords="60,300,450,545" href="https://www.google.com" />
<div class="photo4-content">
Only show when hovering
</div>
</div>
<div class="photo5">
<area shape="rect" coords="483,301,870,545" href="https://www.google.com" />
<div class="photo5-content">
Only show when hovering
</div>
</div>
<div class="photo6">
<area shape="rect" coords="899,300,1288,545" href="https://www.google.com" />
<div class="photo6-content">
Only show when hovering
</div>
</div>
</map>
<img class="enterprise" src="enterprise.png" alt="cnetheader" height="100%" width="100%">
</body>
</html>
.eCommerce{
margin-left: 7%;
}
.photo1-content{
display: none;
}
.photo1:hover .photo1-content{
display: block;
margin-top: -22%;
margin-left: 13%;
}
.photo2-content{
display: none;
}
.photo2:hover .photo2-content{
display: block;
margin-top: -22%;
margin-left: 44%;
}
.photo3-content{
display: none;
}
.photo3:hover .photo3-content{
display: block;
margin-top: -22%;
margin-left: 75%;
}
.photo4-content{
display: none;
}
.photo4:hover .photo4-content{
display: block;
margin-top: -1%;
margin-left: 13%;
}
.photo5-content{
display: none;
}
.photo5:hover .photo5-content{
display: block;
margin-top: -1%;
margin-left: 44%;
}
.photo6-content{
display: none;
}
.photo6:hover .photo6-content{
display: block;
margin-top: -1%;
margin-left: 75%;
}
.enterprise{
position: static;
}
最佳答案
结合使用 position:absolute 和 top,bottom,left,right 属性
关于javascript - 悬停显示 div 时页面上的内容保持移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37266811/
相关文章：
javascript - 如何在 TITLE 标签上显示 JS 变量？
asp.net - 使用 javascript 确定 ASP.NET 页面是否为回发
javascript - 当包含在自定义可折叠 div 中时，Jquery Chosen 不显示数据占位符
javascript - 如何在主干 View 中使用 "this"？
javascript - 处理: onload not being triggered for images with size zero in JavaScript?的最佳方法是什么