<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
.border {
border: 2px solid #000000;
width: 100px;
height: 100px;
}
.border img {
width: 50px;
height: 50px;
}
.text {
display:none;
}
.text.open {
display: block;
}
</style>
</head>
<body>
<div class="border">
<img src='#'>
<div class='text'>first</div>
</div>
<div class="border">
<img src='#'>
<div class='text'>second</div>
</div>
<div class="border">
<img src='#'>
<div class='text'>third</div>
</div>
<script>
var handle = function(e) {
this.querySelector('.text').classList.toggle('open', e.type === 'mouseenter');
};
var myLink = document.querySelectorAll('.border');
for (i = 0; i < myLink.length; i++) {
myLink[i].addEventListener('mouseenter', handle);
myLink[i].addEventListener('mouseleave', handle);
}
</script>
</body>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
.border {
border: 2px solid #000000;
width: 100px;
height: 100px;
}
.border img {
width: 50px;
height: 50px;
}
.text {
display:none;
}
.border:hover .text {
display: block;
}
</style>
</head>
<body>
<div class="border">
<img src='#'>
<div class='text'>first</div>
</div>
<div class="border">
<img src='#'>
<div class='text'>second</div>
</div>
<div class="border">
<img src='#'>
<div class='text'>third</div>
</div>
</body>