어떻게 이렇게 호버링 효과를 얻을 수 있습니까?

Question

나는 현재 나의 탐색을위한이 같은 호버 효과를 달성하기 위해 노력하고 있지만, 비참하게 실패하고 있습니다 :

내가 난 후 무엇에 대한 자습서 상대를 찾을 수 없습니다. 누군가 나를 도와 주거나 올바른 방향으로 나를 가리킬 수 있습니까?

Answer 1

나는이 (JSBin가) 당신이 원하는 것을 믿습니다.

내가 올바르게 문제를 이해했다면, 까다로운 부분은 마우스를 가져 가면 주황색 배경이 부모 높이 이상으로 확장된다는 것입니다.

나는이 예제를 신속하게 결합했으며, 사용자가 :before 요소를 사용하여 완벽하게 달성 할 수 있다고 생각합니다.

HTML : 기후 문의

CSS :

이

html { 
    font-family: helvetica; 
} 

a { 
    text-decoration: none; 
} 

nav { 
    background-color: rgb(29, 106, 173); 
    display: flex; 
    flex-direction: row-reverse; 
    font-size: .9em; 
} 

nav a { 
    color: white; 
    text-transform: uppercase; 
    padding: 80px 10px 20px; 
    position: relative; 
} 

nav a:hover { 
    color: rgb(29, 106, 173); 
    background-color: rgb(240, 139, 0); 
} 

nav a:hover:before { 
    content: ''; 
    position: absolute; 
    background-color: rgb(240, 139, 0); 
    left: 0; 
    bottom: -10px; 
    width: 100%; 
    height: 10px; 
} 

nav a:first-of-type { 
    order: 1; 
} 

Answer 2

대단히 모호한 질문입니다. 이 특정 질문에 대해서는 https://developer.mozilla.org/en-US/

을 확인하십시오. CSS를 사용할 수 있습니다. cccccc 당신이 원하는 색상 위치를

.menu-item:hover{ 
    background:#ccccccc; 
} 

을 쓸 수는 .menu-item

라는 메뉴 항목에 대한 클래스가 있다고 할 수 있습니다.

행운

Answer 3

이 당신이 원하는 (fiddle here)입니다.

HTML :

<div id="Hover">Hover me!</a> 

CSS는 :

#Hover { 
    width: 90px; 
    height: 40px; 
    background: yellow; 
} 

#Hover:hover { 
    background: blue; 
}