CSS 전용 - 버튼 위로 마우스를 가져갈 때 메뉴를 슬라이드하는 방법은 무엇입니까?

Question

버튼 위로 마우스를 가져 가면 메뉴가 밖으로 나오기를 원합니다. 어쨌든 나는 그것이 버튼 자체가 아니라 메뉴 자체에 호버 효과를 추가 할 때만 작동합니다. 내가 온라인으로 찾을 수 있었던 것은 모두 동일했습니다 (호버 효과는 메뉴가 아니라 슬라이드 아웃해야 함). 어떻게 구현할 수 있습니까? jsfiddle : https://jsfiddle.net/codingcodingcoding/tuhug8x8/

HTML :

<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span> 
    <nav id="navigation"> 
    <ul> 
     <li>home</li> 
     <li>home</li> 
     <li>home</li> 
    </ul> 
    </nav> 

CSS :

.icon:hover#navigation { 
    left: 0; 
} 

.icon { 
    left: 0px; 
} 

#navigation { 
    position: fixed; 
    width: 200px; 
    height: 300px; 
    background-color: red; 
    top: 0; 
    left: -200px; 
} 

Answer 1

HTML

<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span> 
    <nav id="navigation"> 
    <ul> 
     <li>home</li> 
     <li>home</li> 
     <li>home</li> 
    </ul> 
    </nav> 

CSS : 여기

.icon:hover + #navigation { 
    left: 0; 
} 

.icon { 
    left: 0px; 
} 

#navigation { 
    position: fixed; 
    width: 200px; 
    height: 300px; 
    background-color: red; 
    top: 0; 
    left: -200px; 
} 

, 난 그냥 + 선택 olny을 추가했습니다.

Answer 2

#navigation 순서대로 (귀하의 경우에 span 요소 인) 아이콘 컨테이너의 자식 요소해야 마우스를 올리면 선택할 수 있습니다. 아래 그림과 같이 닫는 span 태그를 이동하기 만하면됩니다.

(나는 이미지 대신 여기에 아이콘 N 스 니펫을 사용하지만, 바이올린, 당신은 아이콘을 볼 수 있습니다 : https://jsfiddle.net/qLy4g8sL/1/)

.icon { 
 
    left: 0px; 
 
} 
 

 
#navigation { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 300px; 
 
    background-color: red; 
 
    top: 0; 
 
    left: -200px; 
 
} 
 
.icon:hover #navigation { 
 
    left: 0; 
 
}

<span class="glyphicon glyphicon-home icon" style="font-size:40px;"><img src="http://placehold.it/50x50"> 
 
<nav id="navigation"> 
 
    <ul> 
 
    <li>home</li> 
 
    <li>home</li> 
 
    <li>home</li> 
 
    </ul> 
 
</nav> 
 
</span>

Answer 3

당신은을 사용할 수를 + 이 같은 현재의 HTML 구조를 유지하려는 경우 또는 ~ CSS 선택기 :

.icon:hover + #navigation { 
 
    left: 0; 
 
} 
 

 
.icon { 
 
    left: 0px; 
 
} 
 

 
#navigation { 
 
    position: fixed; 
 
    width: 200px; 
 
    height: 300px; 
 
    background-color: red; 
 
    top: 0; 
 
    left: -200px; 
 
}

<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
 

 
<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span> 
 
<nav id="navigation"> 
 
    <ul> 
 
    <li>home</li> 
 
    <li>home</li> 
 
    <li>home</li> 
 
    </ul> 
 
</nav>

할 수 있습니다 read more about