Question

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

<!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>

Answer 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 ;}
}
}

通过链接弹出图像

1 个答案: