다음 두 가지 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;
}
는 div
에 hover
당신이 .title
매우 불쾌하게 확장 얻을 보게 될 때 때문에이의 .menu
를 전환 display
을 사용하지 않은, 여기 여기
공지 사항을 JS Bin를 참조하십시오. 그래서 visibility
을 사용했지만 다른 문제가 나타났습니다. hover
에 div
에 있습니다. '.title'에 없어도이 모든 문제에 대한 해결 방법이 있습니까? 가시성 숨겨진 요소에 마우스를 올리면 피할 수 있습니까?
_ "나는 심지어 내가'.title'에 아닙니다 div''에 마우스를 할 수 있다는 것입니다" _ 물론 자손 요소가 보이지 않는다고해서 하위 요소가 보이지 않는다고해서 'div' 자체가 전체 영역을 차지합니다. 이 "문제"를 해결하는 데 도움이되는 _ 자의 형제 조합에 대해 읽어보십시오. – CBroe
@CBroe 인접한 형제가 작동하지만 '가시성'을 사용하지 않습니다. 보이지 않는 영역 아래에서 클릭을 캡처하고 싶을 때 제대로 작동하지 않습니다. – longtengaa