В событии наведения CSS можно изменить стиль другого div?
Возможный дубликат:
Есть ли способ навести курсор на один элемент и воздействовать на другой элемент?
Когда я наводил курсор на div или class с идентификатором «a», могу ли я изменить цвет фона div или classа с идентификатором «b»?
- Как настроить IE7 и IE8 на допустимый CSS?
- Bootstrap 4 Center Вертикальное и горизонтальное выравнивание
- Можно использовать граничный радиус вместе с пограничным изображением с gradleиентом?
- Селектор CSS для первого элемента с classом
- Предупреждение Google: ресурс, интерпретируемый как шрифт, но переданный с помощью приложения типа MIME / октетного streamа
- Остановка анимации CSS3 на последнем кадре
- Стиль дочернего элемента при наведении указателя мыши на родителя
- Эффект перехода CSS делает изображение размытым / перемещает изображение 1px, в Chrome?
- CSS background-image - Какое правильное использование?
- Что альтернатива использованию после удаления jQuery 1.9 .toggle (function, function)?
- CSS делает ширину включает дополнение?
- Фон с 2 цветами в JavaFX?
- Как удалить пунктирную схему Firefox на BUTTONS, а также ссылки?
Да, вы можете это сделать, но только если #b после #a в HTML.
Если #b появляется сразу после #a : http://jsfiddle.net/u7tYE/
#a:hover + #b { background: #ccc } Div A Div B
Это использует соседний комбинатор ( + ).
Если между #b и #b есть другие элементы, вы можете использовать это: http://jsfiddle.net/u7tYE/1/
#a:hover ~ #b { background: #ccc } Div A random other elements random other elements random other elements Div B
Это использует общий комбинированный комбинатор ( ~ ).
И + и ~ работают во всех современных браузерах и IE7 +
Если #b является потомком #a , вы можете просто использовать #a:hover #b .
ALTERNATIVE: вы можете использовать чистый CSS, чтобы сделать это, расположив второй элемент до первого. Первый div является первым в разметке, но расположен справа или ниже второго. Он будет работать, как если бы он был предыдущим братом.
Это не может быть сделано исключительно с помощью css. Это поведение, которое влияет на стиль страницы.
С помощью jquery вы можете быстро реализовать поведение из своего вопроса:
$(function() { $('#a').hover(function() { $('#b').css('background-color', 'yellow'); }, function() { // on mouseout, reset the background colour $('#b').css('background-color', ''); }); });
Следующий пример основан на jQuery, но его можно достичь с помощью любого набора инструментов JS или даже простого старого JS
$(document).ready(function(){ $("#a").mouseover(function(){ $("#b").css("background-color", "red"); }); });
Чистое решение без jQuery:
Javascript (глава)
function chbg(color) { document.getElementById('b').style.backgroundColor = color; }
HTML (тело)
This is element a This is element b
JSFiddle: http://jsfiddle.net/YShs2/