带有链接的图像弹出窗口答案

【问题标题】：Pop-up over image with link带有链接的图像弹出窗口
【发布时间】：2018-09-21 05:27:01
【问题描述】：

我有这些重定向到链接的图像，我希望当我将鼠标悬停在它们上时会弹出一个文本。怎么做？我尝试了 w3schools 教程，但它们不包含 div

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>


div.folder1 {
    position: absolute;
    top: 30%;
    left: 50%;

}

div.folder2 {
position: absolute;
top: 20%;
left: 40%;

}

</style>
</head>
<body>

<div class="folder1"> 
<a href="yourlinkhere" target="_self">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57" />
</a>  
</div>

<div class="folder2"> 
<a href="yourlinkhere" target="_self">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57" />
</a>  
</div>

</body>
</html>

【问题讨论】：

标签： html image hyperlink popup hover

【解决方案1】：

HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="1.css"/>
<script>
function popup1() {
var popup = document.getElementById("myPopup1");
popup.classList.toggle("show");
}
function popup2() {
var popup = document.getElementById("myPopup2");
popup.classList.toggle("show");
}
</script>
<title></title>

</head>
<body>

<div class="folder1"> 
<div class="popup" onmouseover="popup1()">
<span class="popuptext" id="myPopup1">Popup text...</span>

<a href="yourlinkhere" target="_self">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
</a>  
</div>
</div>

<div class="folder2"> 
<div class="popup" onmouseover="popup2()">
<span class="popuptext" id="myPopup2">Popup text</span>
<a href="yourlinkhere" target="_self">
<imgsrc="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja
6xI1x5vw3ao1_500.png" height="46" width="57"
</a>  
</div>
</div>

</body>
</html>

CSS：

.folder1 {
position: absolute;
top: 30%;
left: 50%;

}

.folder2 {
position: absolute;
top: 20%;
left: 40%;

}
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}


.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}


.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}


.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}


@-webkit-keyframes fadeIn {
from {opacity: 0;} 
to {opacity: 1;}
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
}

【讨论】：

这是 w3schools 代码，它确实有效，您只需要将 div 添加到文件夹 div 中，并且您需要在关闭文件夹 div 之前关闭它（我在这段代码中做了)，需要添加 onmouseover="function()" 命令
我必须如何以及在哪里添加 onmouseover="function()" ？
在代码里面，我已经加进去了，在弹出的div里面