한 요소에 마우스를 올렸을 때 다른 요소에 영향을 미치는 방법

Question

<p>제가 원하는 것은 하나의 <code>div</code>에 마우스를 올리면 다른 <code>div</code>의 속성에 영향을 미치는 것입니다. </p> <p>예를 들어, 이 JSFiddle 데모에서 <code>#cube</code> 위로 마우스를 가져가면 <code>배경 색상</code> <code>#container</code>에 대해서는 <code>#cube</code>가 영향을 받습니다. <!-- p-->

<pre class="brush:css;toolbar:false;">div { 개요: 1px 단색 빨간색; } #컨테이너 { 너비: 200px; 높이: 30px; } #큐브 { 너비: 30px; 높이: 100%; 배경색: 빨간색; } #큐브:호버 { 너비: 30px; 높이: 100%; 배경색: 파란색; }</pre> <pre class="brush:html;toolbar:false;"><div id="container"> <div id="큐브"> </div>

Answer 1

이 특정 예에서는 다음을 사용할 수 있습니다.

으아악

이 예는 cube 是 container 어린이에게만 적용됩니다. 더 복잡한 시나리오의 경우 다른 CSS를 사용하거나 JavaScript를 사용해야 합니다.

Answer 2

큐브가 컨테이너 바로 내부에 있는 경우:

으아악

큐브가 컨테이너 옆에 있는 경우(컨테이너 닫기 표시 뒤):

으아악

큐브가 컨테이너 내부 어딘가에 있는 경우:

으아악

큐브가 컨테이너의 형제인 경우:

으아악