CSS : 다른 div가 마우스를 가리킬 때 div 표시

Question

2 div가 있습니다. Div A와 Div B. Div A가 맴도는 경우, Div B가 필요합니다. 이것은 순수한 CSS로만 가능합니까? 또는 쿼리에서 수행 할 경우,이 두 div에 대해 id를 사용할 수 없다는 가정하에이 기반을 어떻게 사용합니까?

감사

Answer 1

div에 포함되어

기반을 가정 :

http://jsfiddle.net/4p8CM/1/

#container > div { 
    display: none 
} 
#container > div:first-child { 
    display: block 
} 
#container > div:hover + div { 
    display: block 
} 

<div id="container"> 
    <div>A</div> 
    <div>B</div> 
</div> 

:first-child 물건을 사용자가 설정이 문제를 해결하는 것입니다 우리는이 두 div에 대해 id를 사용할 수 없습니다.

두 번째 div 당신이 위로 마우스를 가져 가면 볼 수 있고 싶어 경우

---

,이 시도 :

http://jsfiddle.net/4p8CM/3/

#container > div { 
    display: none 
} 
#container > div:first-child { 
    display: block 
} 
#container:hover > div { 
    display: block 
} 

Answer 2

내가 요소가 사용되는 어떤 특정 식별이 예제에서 요소를 id의를 사용한 적이 있습니다. id 대신에 거의 모든 다른 CSS 선택기를 사용할 수 있습니다. 중요한 점은 사이에 선택된 요소 인 사이입니다. 첫 번째 예에서는 adjacent-sibling selector을 사용했으며 후자에서는 descendant selector을 사용했습니다.

마크 업을 게시하고 의견이 있으면 알려 주시면 작업 내용에 맞게 선택기를 수정 해 보겠습니다. 그렇지 않으면 이는 일반적인 최선의 추측 일뿐입니다. 그리고 그들은 말했다

는 답변은 아래에 나타납니다 ... 항상 유용하지 않은 :

당신이 슈퍼 간단한 마크 업을 가지고있는 경우에 다음이 은 CSS를 통해 수행 할 수 있습니다

#divB { 
    display: none; 
} 

#divA:hover + #divB { 
    display: block; 
} 

<div id="divA"> 
    Some content in 'divA' 
</div> 
<div id="divB"> 
    Some content in 'divB' 
</div> 

JS Fiddle demo. 또는 :

#divB { 
    display: none; 
} 

#divA:hover #divB { 
    display: block; 
} 

<div id="divA"> 
    Some content in 'divA' 
    <div id="divB"> 
     Some content in 'divB' 
    </div> 
</div> 

JS Fiddle demo. 두 div의 가정

는

Answer 3

당신이 A와 DIV B를 div에있는 컨테이너를 추가하는 경우 이 방법으로 매우 쉽게 할 수 있습니다.

<style> 
/* Only for testing */ 
.a, .b { 
    border: 1px solid black; 
} 
/* Hide the B div */ 
.b { 
    display:none; 
} 
/* Show the B div when hover on A (the container include only A when B is not displayed */ 
.container:hover .b { 
    display: block; 
} 
</style> 
<div class="container"> 
    <div class="a">A</div> 
    <div class="b">B</div> 
</div> 

http://jsfiddle.net/royshoa/bzhz8pou/