Здравствуйте. Помогите пожалуйста с проблемой.
Мне нужно, чтобы при наведении на ссылку CLOTHES (в шапке сайта), выскакивало модальное окно.
Я прописал код, но проблема в том, что если я убираю курсор с ссылки CLOTHES, то и модальное окно пропадает.
Буду очень благодарен за помощь.
|
Код:
|
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
height: 1000px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('.clothes').hover(function(){
$('.modal-douter').addClass('is-active');
}, function() {
$('.modal-douter').removeClass('is-active');
});
</script>
</head>
<body>
<section class="page-header__header-laptop header-laptop">
<div class="header-laptop__wrapper">
<div class="modal-douter"></div>
<div class="header-laptop__logo">
<img src="./src/img/my-shop-logo-1610442463.jpg" alt="Nastya.">
</div>
<div class="header-laptop__menu menu">
<ul class="menu__list">
<li class="menu__title modals">
<a href="#" class="menu__link clothes">clothes</a> <span class="fl-outicons-chevron2"></span>
</li>
<li class="menu__title">
<a href="#" class="menu__link">accessories</a>
</li>
<li class="menu__title arivals">
<div class="arivals__pointer-wrapper">
<div class="arivals__pointer"><span class="arivals__pointer-span">SALE</span></div>
</div>
<a href="#" class="menu__link">new arivals</a>
</li>
<li class="menu__title">
<a href="#" class="menu__link">collection</a>
</li>
<li class="menu__title product">
<div class="product__pointer-wrapper">
<div class="product__pointer"><span class="product__pointer-span">HOT</span></div>
</div>
<a href="#" class="menu__link">product</a>
</li>
<li class="menu__title">
<a href="#" class="menu__link">contact us</a>
</li>
</ul>
</div>
<div class="header-laptop__icons">
<div class="icon"><span class="fl-outicons-heart373 font"></span>
<div class="icon__circle"></div>
</div>
<div><span class="fl-outicons-gear40 font"></span></div>
<div><span class="fl-outicons-magnifying-glass34 font"></span></div>
<div><span class="fl-outicons-user189 font"></span></div>
<div class="icon"><span class="fl-outicons-shopping-cart13 font"></span>
<div class="icon__circle"></div></div>
</div>
<div class="header-laptop__bar-mobile"><span class="fl-outicons-lines7"></span></div>
</div>
<!-- mobile-bar -->
<div class="header-laptop__mobile-bar mobile-bar">
<div class="menu-mobile">
<ul class="menu-mobile__list">
<li class="menu-mobile__title modals">
<a href="#" class="menu-mobile__link clothes">clothes</a> <span class="fl-outicons-chevron2"></span>
</li>
<li class="menu-mobile__title">
<a href="#" class="menu__link">accessories</a>
</li>
<li class="menu-mobile__title arivals">
<div class="arivals__pointer-wrapper">
<div class="arivals__pointer"><span class="arivals__pointer-span">SALE</span></div>
</div>
<a href="#" class="menu-mobile__link">new arivals</a>
</li>
<li class="menu-mobile__title">
<a href="#" class="menu-mobile__link">collection</a>
</li>
<li class="menu-mobile__title product">
<div class="product__pointer-wrapper">
<div class="product__pointer"><span class="product__pointer-span">HOT</span></div>
</div>
<a href="#" class="menu-mobile__link">product</a>
</li>
<li class="menu-mobile__title">
<a href="#" class="menu__link">contact us</a>
</li>
</ul>
</div>
</div>
</section>
<style>
.modal-douter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 10%);
width: 100%;
height: 250px;
background-color: blueviolet;
z-index: 10;
display: none;
}
.modal-douter.is-active {
display: block;
}
.header-laptop {
width: 100%;
height: 75px;
display: flex;
justify-content: center;
background-color: #fff;
position: relative;
z-index: 11;
}
.header-laptop__wrapper {
width: 80%;
min-width: 1250px;
height: 100%;
position: relative;
z-index: 60;
}
</style>
</body>
</html> |
отдельно jQuery код:
$('.clothes').hover(function(){
$('.modal-douter').addClass('is-active');
}, function() {
$('.modal-douter').removeClass('is-active');
});
отдельно css:
.modal-douter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 10%);
width: 100%;
height: 250px;
background-color: blueviolet;
z-index: 10;
display: none;
}
.modal-douter.is-active {
display: block;
}
.header-laptop {
width: 100%;
height: 75px;
display: flex;
justify-content: center;
background-color: #fff;
position: relative;
z-index: 11;
}
.header-laptop__wrapper {
width: 80%;
min-width: 1250px;
height: 100%;
position: relative;
z-index: 60;
}
