호버에서 다른 div를 타겟팅 하시겠습니까?

Question

셀렉터 내에서 다른 요소를 타겟팅 할 수 있는지 여부를 알아야합니다. 예 : '이 요소 위에 마우스를 올려 놓으면이 OTHER 요소를 변경하십시오.'; 같은 :

#gallery li:hover { 
    h2 {display:block} 
} 

그래서 내가 #gallery의 사업부 위에 마우스를 올려 때 H2 요소가 블록으로 표시됩니다 말을 노력하고있어 위의 예이다.

CodePen : 당신의 도움이

Answer 1

에 대한 http://codepen.io/sad_muso/pen/JKdBox

많은 감사 당신이 CSS 속성을 사용할 수 있지만 다른 요소를 정의 할 수 없습니다 측면 {}에서 당신에 의해 작성된 CSS가 유효하지 않은 참조하십시오.

그래, 거기에 +, ~ 같은 CSS의 일부 선택자가 있습니다.

이

<ul> 
    <li> 
    <h2>...</h2> 
    </li> 
</ul> 

그런 다음 리튬의 호버에이 같은 아이의 div CSS를 적용하여 h2에서 뭔가를 할 수처럼 HTML이 가정하자.

li:hover h2{ 
    color:red; 
} 

간단한 공간 h2이 <li>의 자식 요소라고 정의한다.

가정하자 HTML은 그런 다음

li:hover + h2{ 
    color:red; 
} 

+는 h2이 li 옆에 배치되는 것을 정의 li 호버에 h2에 뭔가를이 CSS를 사용하여이

<ul> 
    <li>...</li> 
    <h2>...</h2> 
</ul> 

같다

다음은 CSS를 사용하여 다른 요소에 무언가를 적용하는 몇 가지 예입니다.

그러나 이것이 요구 사항을 충족시키지 못하면 유일한 해결책은 jquery를 사용하는 것입니다. JQuery와 단지 CSS 규칙에 있지만 당신에게 예를주기 위해 요소가 단순히 내가 <ul>의 자식으로 <h2>을 사용하고 위의 답변에서이

$('li').hover(function(){ 
    $('h2').css('color','red'); 
}); 

같이 할 수있는 기록 된 경우 중요하지 않습니다 유효한 html 당신 <ul>의 직접적인 아이들로 <h2>를 사용할 수 없습니다. 나는 당신이 필요로하는 것을 이해하지만, 내가 생각하는 경우

Answer 2

확실하지 당신이 필요합니다

또한

#gallery:hover h2{ 
    display:block 
} 

, 당신은 CSS에서 ID # 또는 클래스 .를 사용할 수 있습니다.ID가 고유해야하며 각 요소는 하나의 ID 만 가질 수 있지만 한 페이지에 더 많은 클래스를 가질 수 있으므로 .gallery을 사용하면 클래스가됩니다. 이 같은

<div id="gallery"></div> 

및 클래스 :

여기

<div class="gallery"></div> 

가에 대한 자세한 내용을 읽을 수있는 하나 개의 좋은 링크입니다 또한

는 ID를 사용하기 위해서는 다음과 같이한다, HTML에서 점에 유의 : ID vs class