События mouseover/out
Добрый день, подскажите пожалуйста, как сделать так, что бы при наведении на основной блок, появлялся вложенный блок с текстом (как в примере), но не исчезал при наведении на 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>
|
JohnJohn, использовать события mouseenter/mouseleave вместо mouseover/mouseout. А вообще это проще сделать через CSS.
|
<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>
|
Та дело в том, что при клике на text должно открываться модальное окно и если я поведу мышь за область видимости браузера, то модальное окно исчезает(а мне нужно, что бы оно не исчезало), думал, что это может помочь, но увы нет, но вам спасибо за разъяснение.
|
Вот пример:
<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;
}
.modal {
display: none;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.55);
top: 0;
left: 0;
z-index: 1001;
}
.modal_open .modal {
display: block;
}
</style>
</head>
<body>
<div class="border">
<img src='#'>
<div class='text'>first
<div class='modal'></div>
</div>
</div>
<div class="border">
<img src='#'>
<div class='text'>second
<div class='modal'></div>
</div>
</div>
<div class="border">
<img src='#'>
<div class='text'>third
<div class='modal'></div>
</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);
}
var quickView = document.getElementsByClassName('text');
var qqqq = function () {
this.classList.toggle('modal_open');
};
for (var i = 0; i < quickView.length; i++) {
quickView[i].addEventListener('click', qqqq, false);
}
</script>
</body>
|
JohnJohn, при каком условии тогда должно исчезать окно?
|
при клике на любую область окна
|
<button id="modal_button">Open modal</button> <div class="modal"></div>
var handler = function(e) {
if(e.target !== modalButton && !e.target.matches('.modal, .modal *')) {
modal.classList.remove('open');
this.removeEventListener(e.type, handler);
}
};
var modal = document.querySelector('.modal');
var modalButton = document.getElementById('modal_button');
modalButton.onclick = function() {
if(!modal.classList.contains('open')) {
modal.classList.add('open');
window.addEventListener('click', handler);
}
};
|
все равно если мышь находится за окном браузера, то модалка исчезает, хотя может, я не так что то сделал
|
Спасибо за помощь, разобрался в последнем примере)
|
| Часовой пояс GMT +3, время: 12:10. |