我的代码需要帮助，我添加了css代码，只要您将鼠标悬停在其中一个图片上，就可以启用下拉菜单。它的工作原理......除了下拉菜单只显示在图像的左上角而不是右下角。请帮忙
<!DOCTYPE html>
<html>
<head>
<title>RSS Earth Map</title>
<style>
body {
background-image: url("https://api.edmodo.com/files/717111096/download?f=9k7y8m7if6dkcq345y53s4yp4");
}
img {
float: left;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body><div class="terrain">
<div class="dropdown">
<img id="cDunes" data-hover-src = 'https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf' src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"/>
<img id="eDunes" data-hover-src = 'https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf' src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"/>
<img id="forest" data-hover-src = 'https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf' src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"/>
<img id="oasis" data-hover-src = 'https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf' src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"/>
<img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy">
<div class="dropdown-content">
<p> teleport </p>
</div>
</div>
</div>
<script>
function moveBase() {
//Assign event for each image holding a hover-src
for(var tL=document.querySelectorAll('img[data-hover-src]'), i=0, j=tL.length; i<j; i++){
tL[i].addEventListener('click', replaceImage)
}
function resetToOriginal(){
//Sets all images holding a original-src back to it
for(var tL=document.querySelectorAll('img[data-original-src]'), i=0, j=tL.length; i<j; i++){
var tS = tL[i].getAttribute('data-original-src');
(tS !== tL[i].src) && (tL[i].src = tS)
}
}
function replaceImage(e){
//Clicked element
var tE = e.srcElement || e.target;
//Storing the original src
!tE.getAttribute('data-original-src') && tE.setAttribute('data-original-src', tE.src);
//Reseting all the images
resetToOriginal()
//Change the src
tE.src = tE.getAttribute('data-hover-src') || tE.src
}
}
</script>
</body>
</html>
答案 0 :(得分：0)
在检查之前已经问过类似的东西： Show DIV at mouse cursor on hover of span
您希望使用javascript在鼠标光标处显示该div。