2014-10-13 1 views
0

다음 두 가지 HTML 코드 스 니펫에서 외부 DIV가 가장 넓은 요소와 동일한 너비로 보이도록하고 .title에 마우스를 올리면 '.menu'가 표시됩니다.숨겨진 요소를 숨기지 않으려면 어떻게해야하나요?

<div> 
     <span class="title">abcdefghijklmn</span> 
     <span class="menu"> 
      <span class="child">abcde</span> 
      <span class="child">abcd</span> 
      <span class="child">abc</span> 
      <span class="child">ab</span> 
     </span> 
</div> 

주의 .title에있는 단어는 내가 그것을 해결하기 위해 다음과 같은 CSS를 사용하려고 .child

<div> 
     <span class="title">abcde</span> 
     <span class="menu"> 
      <span class="child">abcdefghijklmn</span> 
      <span class="child">abcd</span> 
      <span class="child">abc</span> 
      <span class="child">ab</span> 
     </span> 
</div> 

에 이상보다,하지만 hover는 잘 작동하지 않았다.

.container { 
    color:#fff; 
    display: inline-block; 
} 
.title { 
    background: blue; 
} 
.title, .menu { 
    display: list-item; 
} 

.menu { 
    visibility: hidden; 
} 

.child { 
    display: block; 
    background: red; 
} 

.title:hover + span{ 
    visibility: visible; 
} 
.menu:hover { 
    visibility: visible; 
} 

divhover 당신이 .title 매우 불쾌하게 확장 얻을 보게 될 때 때문에이의 .menu를 전환 display을 사용하지 않은, 여기 여기

공지 사항JS Bin를 참조하십시오. 그래서 visibility을 사용했지만 다른 문제가 나타났습니다. hoverdiv에 있습니다. '.title'에 없어도이 모든 문제에 대한 해결 방법이 있습니까? 가시성 숨겨진 요소에 마우스를 올리면 피할 수 있습니까?

+0

_ "나는 심지어 내가'.title'에 아닙니다 div''에 마우스를 할 수 있다는 것입니다" _ 물론 자손 요소가 보이지 않는다고해서 하위 요소가 보이지 않는다고해서 'div' 자체가 전체 영역을 차지합니다. 이 "문제"를 해결하는 데 도움이되는 _ 자의 형제 조합에 대해 읽어보십시오. – CBroe

+0

@CBroe 인접한 형제가 작동하지만 '가시성'을 사용하지 않습니다. 보이지 않는 영역 아래에서 클릭을 캡처하고 싶을 때 제대로 작동하지 않습니다. – longtengaa

답변

0

DOM 구조가 CSS 선택기에 영향을주기 때문입니다. 지금까지 DOM과 문제에서 인접 형제 선택 자을 사용해야합니다.

JSBin

변경

div:hover .menu { 
    visibility: visible; 
} 

으로

.title:hover + span{ 
    visibility: visible; 
} 

Here is a link.

+0

정확히 무엇을 코멘트에 말했다. 그러나 가시가 아닌 요소는 또 다른 심각한 문제를 야기합니다. 즉, 마우스 이벤트가 캡쳐 될 수 있도록 해당 영역을 차지하고 있다는 것입니다. – longtengaa

+0

@ 루카스 이걸보세요. ** 포인터 이벤트 ** https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events –

+0

재미있는 것은 내가 살펴볼 것이지만, 내 프로젝트에서 실용적이지 않은 가난한 호환성 때문이다. . :) – longtengaa

1

업데이트 당신은 결과를 얻을 수

 .title, .menu { 
     display: list-item; 
    } 

    .menu { 
     visibility: hidden; 

    } 
    div 
    { 
     display: inline-block; 
    } 
    div:hover .menu { 
     visibility: visible; 
    } 

을 다음과의 CSS.

+0

not working ... 나는''inline-block'' 또한 아이들의 전체 높이까지 확장 될 수 있다고 생각합니다. – longtengaa