Всплывающее изображение со ссылкой

У меня есть эти изображения, которые перенаправляют на ссылки, и я хочу, чтобы при наведении курсора на них появлялся текст. Как это сделать? Я пробовал уроки 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>
0
0
32
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 ()"

Somebody 11.04.2018 13:17

Как и где мне добавить onmouseover = "function ()"?

Percy Dogue 11.04.2018 20:03

Это в коде, я добавил его, это во всплывающем div

Somebody 11.04.2018 21:44

Другие вопросы по теме