CSS 호버 이벤트에서 다른 디브의 스타일링을 변경할 수 있습니까?

CSS 호버 이벤트에서 다른 디브의 스타일링을 변경할 수 있습니까?

이 질문에는 이미 다음과 같은 답변이 있습니다.

한 요소가 맴돌 때 다른 요소에 영향을 주는 방법 (9개 답변)

닫힘3년 전에.

id가 "a"인 divor class 위를 맴돌 때, id가 "b"인 divor class의 배경색을 변경할 수 있습니까?

네, 그렇게 하실 수 있습니다만, 만약에#b뒤에.#aHTML로

한다면#b바로 뒤에 오는#a: http://jsfiddle.net/u7tYE/

#a:hover + #b {
    background: #ccc
}

<div id="a">Div A</div>
<div id="b">Div B</div>

그것은 인접한 형제 조합자를 사용하는 것입니다.+).

다른 요소가 있는 경우#a그리고.#b, 이것을 사용할 수 있습니다: http://jsfiddle.net/u7tYE/1/

#a:hover ~ #b {
    background: #ccc
}

<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>

그것은 일반적인 형제 조합기를 사용하는 것입니다 (~).

둘다요.+그리고.~모든 최신 브라우저와 IE7+에서 작동합니다.

한다면#b의 후손입니다.#a, 간단히 사용할 수 있습니다.#a:hover #b.

대안: 첫 번째 요소 앞에 두 번째 요소를 배치하면 순수 CSS를 사용할 수 있습니다.첫 번째 디브는 마크업에서 첫 번째이지만 오른쪽이나 두 번째 아래에 위치합니다.그것은 마치 이전의 형제처럼 작동할 것입니다.

이것은 순전히 CSS로만 이루어질 수 없습니다.이는 페이지 스타일에 영향을 미치는 동작입니다.

jquery를 사용하면 질문에 대한 동작을 신속하게 구현할 수 있습니다.

$(function() {
  $('#a').hover(function() {
    $('#b').css('background-color', 'yellow');
  }, function() {
    // on mouseout, reset the background colour
    $('#b').css('background-color', '');
  });
});

jQuery가 없는 순수 솔루션:

자바스크립트 (헤드)

function chbg(color) {
    document.getElementById('b').style.backgroundColor = color;
}   

HTML(본문)

<div id="a" onmouseover="chbg('red')" onmouseout="chbg('white')">This is element a</div>
<div id="b">This is element b</div>

JSFiddle: http://jsfiddle.net/YShs2/

다음 예제는 jQuery를 기반으로 하지만 JS 툴 키트를 사용하거나 일반적인 구형 JS를 사용할 수 있습니다.

$(document).ready(function(){
     $("#a").mouseover(function(){
         $("#b").css("background-color", "red");
     });
});

언급URL : https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling