Как при наведении на один объект изменять стиль другого?
почему не работает этот код?
<div class="block1"> <div class="label">text</div> <div class="block2"> <a href="">1</a> <a href="">2</a> <a href="">3</a> </div> </div> <style> .block2 { display: none; } .block1:hover ~ .block2 { display: inline; } </style> |
<div class="block1"> <div class="label">text</div> <div class="block2"> <a href="">1</a> <a href="">2</a> <a href="">3</a> </div> </div> <style> .block2 { display: none; } .block1:hover ~ .block2 { display: inline; } </style>
Дополнительно:
Сотрите ~, у вас должен быть контекстный селектор, а не по соседям
Потому что ~ - это следующий элемент того же уровня (subsequent-sibling), а вам нужен потомок (children).
- А какой символ для этого нужно использовать? И какие вообще в подобных ситуациях есть символы?
- Dar1uz, в данном случае можно обойтись без символа ~
И какие вообще в подобных ситуациях есть символы?
например - https://webdesign.tutsplus.com/ru/the-30-css-selec...
.block1:hover .block2 { display: inline; } |
.block1:hover .block2 { display: inline; }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для изменения стиля одного объекта при наведении на другой объект вам понадобится использовать CSS и JavaScript. Вот пример кода на JavaScript, который позволит вам реализовать данную функциональность:
```html
.object1 {
width: 100px;
height: 100px;
background-color: blue;
transition: all 0.3s ease;
}
.object2 {
width: 100px;
height: 100px;
background-color: red;
transition: all 0.3s ease;
}
function changeStyle() {
var object2 = document.querySelector('.object2');
object2.style.backgroundColor = 'green';
}
```
В данном примере мы создаем два блока div с классами object1 и object2. При наведении на блок с классом object1 вызывается функция changeStyle(), которая изменяет цвет фона блока с классом object2 на зеленый.
Вы также можете добавить другие стили или анимации в функцию changeStyle() или изменить любые другие свойства объектов при наведении на нужный вам объект. Важно помнить, что данное решение использует JavaScript, поэтому убедитесь, что ваш браузер поддерживает JavaScript.