Можно ли отображать класс при наведении курсора на другой класс внутри одного и того же родителя?
Я хочу сделать ".navbar-drop" видимым (display: block) при наведении курсора на элемент с class="fas fa-bars".
Не работает:
.navbar-drop {
display: none;
}
.navbar i:hover .navbar-drop {
display: block;
}
Вот html:
<div class = "navbar">
<div class = "navbar-drop">
<ul>
<li><a href = "#" class = "home">Home</a></li>
<li><a href = "#" class = "about-me">About Me</a></li>
<li><a href = "#" class = "my-projects">My Projects</a></li>
<li><a href = "#" class = "contact-me">Contact Me</a></li>
</ul>
</div>
<i class = "fas fa-bars"></i>
</div>
Мои извинения, если это дубликат, но я искал ответ почти полчаса и не могу найти ничего, что мог бы понять.
Ответы 2
вы не можете выбрать родительский элемент, вам нужно соблюдать правила селектора css. для этого случая правильно это:
.navbar:hover .navbar-drop {
display: block;
}
то есть при наведении курсора на тег .navbar вы установите блок отображения в своих дочерних элементах. .navar-drop невозможно выбрать родительский элемент или что-то, что невозможно с помощью правил выбора CSS
Нет, я не думаю, что это возможно в CSS, но возможно с jQuery.
Я бы исправил это, используя этот бит jQuery
$( ".navbar i" ).hover(
function() {
$( ".navbar-drop" ).css( "display", "block" );
}, function() {
$( ".navbar-drop" ).css( "display", "none" );
}
);
Надеюсь это поможет :)
ОТРЕДАКТИРОВАНО:
Это также возможно в простом JavaScript, как показано ниже.
var hoverPoint = document.getElementsByClassName("fas")[0];
var endPoint = document.getElementsByClassName("navbar-drop")[0];
hoverPoint.addEventListener('mouseover', function() {
endPoint.classList.add('hovered');
});
hoverPoint.addEventListener('mouseout', function() {
endPoint.classList.remove('hovered');
});
А затем скопируйте это в свой CSS :-)
.navbar-drop.hovered {
display: block;
}
.navbar-drop {
display: none;
}
Спасибо, есть ли способ сделать это без импорта всей библиотеки? например .addEventListener('mouseover', ... просто не уверен, как закрыть его после
@MoreeZ отредактировал мой ответ, надеюсь, это поможет :)
Я понял, спасибо <3