CSS изменяет цвет фона отдельного div при наведении курсора мыши на другой div
Учитывая базовое меню и div, как показано ниже ..
#link:hover ~ #custom {
background: #ccc
}<div class = "header">
<div class = "nav">
<ul>
<li>
<a id = "link" href = "#">Link</a>
</li>
</ul>
</div>
</div>
<div id = "custom">
Custom Content
</div>Я пробовал использовать общий комбинатор братьев и сестер, но он не работает.
Есть ли способ с помощью CSS, чтобы я мог заставить div custom также изменять цвет фона при наведении курсора на элемент навигации?
Нужен ли мне Javascript или это можно сделать проще?
Я пробовал использовать комбинатор соседнего брата, но он не работает. Обновили op
Не сейчас. CSS не может выбрать родительский узел. Вы должны использовать JavaScript onmouseover / mouseout и добавить / удалить класс из div.custom. проверьте также этот ответ
С такой структурой html вам понадобится js. Я пробовал использовать комбинатор соседнего брата - #link не имеет братьев и сестер, поэтому это не работает
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
вы можете изменить mydiv css с помощью hover mynav попробуйте этот css.
<style>
#mynavid:hover +#mydivid{color:red;}
</style>
Я думаю, дело в том, что в навигационной панели будут другие ссылки, которые также показывают другие div, плюс со структурой html op, вам нужно будет поместить курсор на заголовок, а не на навигацию
вот простой код, надеюсь, это поможет ...
.card {
width: 150px;
}
.image {
height: 80px;
background-color: tomato;
}
.description {
height: 80px;
background-color: limegreen;
}
.image:hover ~ .description .link,
.link:hover {
color: #ff0;
background-color: white;
}<div class = "card">
<div class = "image">img</div>
<div class = "description">
<a class = "link" href=#>some link</a>
<div class = "text">Fulfilled direction use continual set.</div>
</div>
</div>Да, вы можете сделать это с помощью j-запроса. Ниже будет код сценария:
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(document).mousemove(function(){
if ($("#nav-link:hover").length != 0){
$(".custom").css("background-color","red");
} else{
$(".custom").css("background-color","");
}
});
});
</script>
<div class = "header">
<div class = "nav">
<ul>
<li>
<a href = "#" id = "nav-link">Link</a>
</li>
</ul>
</div>
</div>
<div class = "custom">
Custom Content
</div>Добавьте этот код в свой код выше, и он будет работать
Обратитесь к этому stackoverflow.com/questions/6910049/…