CSS - 두 요소가 다른 div에 속할 때 다른 요소로 커서 이동하여 요소에 영향을 미침

Question

다른 div에 속한 요소에서 마우스를 가져 div에 배치 된 요소에 영향을 줄 수 있습니까?

일반적인 형제 선택기를 사용하여 작동하도록 할 수 있지만, 내가 가져온 요소가 다른 요소 안에 들어 있지 않은 경우에만 사용할 수 있습니다. 이것이 유일한 방법일까요?

편집 : 나는 모든 세부 사항으로 당신을 지치고 싶지는 않았지만 예, 아마도 처음에는 마크 업을 포함해야했습니다. 그래서, 여기 단순화 오히려 (이상)입니다 :

<nav> 
    <button></button> 
</nav> 

<div id="sidemenu"> 
<ul class="nav"> 
    <li>Link 1</li> 
    <li>Link 2</li> 
</ul> 
</div> 

소형 기기에서 sidemenu가 숨겨져있을 것이다 및 버튼 요소가 나타납니다합니다. 후자를 가져 가면 사이드 메뉴가 드롭 다운 메뉴로 다시 나타납니다. 적어도 그것이 아이디어였습니다. 마크 업을 변경하는 것이 옳다고 생각하지 않기 때문에 다른 방법을 찾아야합니다.

Answer 1

이것은 불가능합니다. 하위 요소를 상위 요소의 호버에 응답하도록 만들 수 있지만 전혀 다른 요소를 다른 임의 요소의 호버에 응답하도록 만들 수는 없습니다.

CSS 만있는 경우. 약간의 javascript/jQuery를 추가하면 가능합니다. 예를 들어 jQuery에서 호버 기능을 사용할 수 있습니다. 이것은 기본적으로 무엇을

//edited 
$('button').hover(function() { 
    $('#sidemenu').addClass('hover'); 
}, 
function() { 
    $('#sidemenu').removeClass('hover'); 
}); 

는 #element 유혹과 호버를 제거 할 때 클래스를 제거 할 때 #other-element에 클래스를 추가합니다.

편집 : 마크 업과 일치하도록 코드를 업데이트했습니다. 이 경우 버튼 위로 마우스를 올려 놓으면 사이드 메뉴에 클래스가 추가됩니다. 클래스 hover가 여기에 추가 될 때 CSS의이 작품은 일반적으로 #sidemenu을 숨길 수 있지만 표시 할

#sidemenu 
{ 
display:none; 
} 

#sidemenu.hover 
{ 
display:block; 
} 

: 당신은 다음과 같이 sidemenu 스타일을 할 수있다.