Добрый день, подскажите пожалуйста, как сделать так, что бы при наведении на основной блок, появлялся вложенный блок с текстом (как в примере), но не исчезал при наведении на img или на сам текст. Надеюсь, выразился понятно. Спасибо.
<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 myLink = document.querySelectorAll('.border');
for (i = 0; i < myLink.length; i++) {
myLink[i].addEventListener('mouseover', function(e) {
e.target.querySelector('.text').classList.add('open');
});
myLink[i].addEventListener('mouseout', function(e) {
e.target.querySelector('.text').classList.remove('open');
});
}
</script>
</body>