Как убрать при наведении указатель от :: before

64
8

Я создал выпадающее меню стиля, используя scss и bootstrap. Я был в состоянии настроить все как требуется с одной проблемой.

При наведении курсора на стрелку вверху выпадающего меню она выделяет стрелку, я не хочу, чтобы это произошло. Стрелка должна выделяться только тогда, когда первый элемент меню находится при наведении курсора.

Как я мог это исправить? См. Ссылку на кодовый блок: https://codepen.io/duodice/pen/NJJXYJ.

(изображения не загружаются так хорошо, как локальные файлы)

Чтобы воспроизвести проблему: 1. Наведите указатель мыши на "Службы" на панели навигации 2. Наведите указатель мыши на маленький треугольник в верхней части раскрывающегося меню.

Scss:

$pop-up-menu-bg-clr : white;
$pop-up-menu-shade-clr : #B0c1d3;
$pop-up-menu-font-clr : #1b2b43;

.pop-up-menu-container {
position: relative;

li:hover {
.pop-up-menu-list {
display: block;
}

}
}

.pop-up-menu-list {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding-top: 1.5rem;
background-color: transparent;
z-index: 999;

li a {
transition: none !important;
display: block;
color: $pop-up-menu-font-clr;
text-align: left;
background-color: $pop-up-menu-bg-clr;
width: 100%;
padding: 1rem;

&:hover {
background-color: $pop-up-menu-shade-clr;
color: white;
}

img {
height: 80%;
}

p {
color: $pop-up-menu-font-clr;
font-size: 13px;
margin-bottom: 0;
}
}

li:first-child {
position: relative;
z-index: 998;

&:hover {
border-bottom-color: y
}

a {
border-radius: 15px 15px 0 0;
}

&:before {
position: absolute;
content: "";
width: 0;
height: 0;
border: 1rem solid transparent;
border-bottom-color: $pop-up-menu-bg-clr;
top: 0;
left: 30%;
margin-top: calc(-2rem + 1px);
}

&:hover:before {
border-bottom-color: $pop-up-menu-shade-clr;
}

}

li:last-child a {
border-radius: 0 0 15px 15px;
}

}

HTML:

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" id="sidebarCollapse" data-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav pop-up-menu-container">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
<ul class="pop-up-menu-list list-unstyled">
<li>
<a href="#">
<div class="row">
<div class="col-2 mr-2">
<img src="wwwroot/images/icons/settings.svg">
</div>
<div class="col">
All Services
<p>Learn more about our services</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="row">
<div class="col-2 mr-2">
<img src="wwwroot/images/icons/web_development_devices.svg">
</div>
<div class="col">
Web Development
<p>Design & Development</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="row">
<div class="col-2 mr-2">
<img src="wwwroot/images/icons/hosting_cloud.svg">
</div>
<div class="col">
Hosting & Maintenance
<p>Store your site online</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="row">
<div class="col-2 mr-2">
<img src="wwwroot/images/icons/marketing_growth.svg">
</div>
<div class="col">
Digital Marketing
<p>Get more visitors today</p>
</div>
</div>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>

Благодарю.

спросил(а) 2021-01-19T14:12:05+03:00 6 месяцев, 1 неделя назад
1
Решение
64

Вы можете установить hover на li первого ребенка без (как вы установите остальной a li):

Измени это на li a:hover :

Смотрите рабочий код

li:first-child {
position: relative;
z-index: 998;

a:hover {
border-bottom-color: y
}

a {
border-radius: 15px 15px 0 0;
}

a:before {
position: absolute;
content: "";
width: 0;
height: 0;
border: 1rem solid transparent;
border-bottom-color: $pop-up-menu-bg-clr;
top: 0;
left: 30%;
margin-top: calc(-2rem + 1px);
}

a:hover:before {
border-bottom-color: $pop-up-menu-shade-clr;
}

}

ответил(а) 2021-01-19T14:12:05+03:00 6 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема