CSS 마우스 오버시 호버

Question

4 개의 항목이있는 메뉴가 있으며 각 항목의 색상이 다릅니다.

나의 호기심은 각 항목을 마우스로 가리면서 어둡게하는 것이지만 불투명도를 사용하여이를 달성 할 수 있다는 것을 알았지 만 그 전에는 항목 중 하나를 가리킬 때마다 그 부분 만 강조 표시하고 패딩은 건너 뜁니다. 나는 바보 같은 질문을 물어 봤지만 이것은 1999 년 이래 나의 첫 번째 프론트 엔드 작업이다. :)

여기서 무엇이 잘못되었는지 이해하는데 도와 주시겠습니까? 다들 감사 해요.

이

는 메뉴 구조

<div class="menu-bar-inner"> 
    <ul class="menu-bar-menu"> 
    <li class="color1"><a href="">Item 1</a></li> 
    <li class="color2"><a href="">Item 2</a></li> 
    <li class="color3"><a href="">Item 3</a></li> 
    <li class="color4"><a href="">Item 4</a></li> 
    </ul> 

이며,이 당신은 유혹이 사용할 수 있습니다 내 CSS

.menu-bar-menu li, .menu-bar-menu li a { 

list-style: none; 
float: left; 
padding: 6px 20px 7px 20px; 
text-align: center; 
text-decoration: none; 
color: #ffffff; 
font-size: 16px; 
font-weight: 400; 
background-color: #ce5043 
} 


.menu-bar-menu li a:hover { 
background-color: black; 
} 



.color1 {background-color: #ce5043} 
.color2 {background-color: #fb8521} 
.color3 {background-color: #444444} 
.color4 {background-color: #b3c833} 

Answer 1

나는 li 요소 오프 패딩을 대신 a 요소에 넣어 것입니다. 또한 a을 display: block;으로 설정하여 부모의 전체 높이와 너비를 차지합니다 (li). 그래서 같이 : 또한 http://jsfiddle.net/82uyt/

, 당신이 닫는 </div> 태그가 없습니다했다 :

.menu-bar-menu li, .menu-bar-menu li a { 
     list-style: none; 
     float: left; 
     text-align: center; 
     text-decoration: none; 
     color: #ffffff; 
     font-size: 16px; 
     font-weight: 400; 
     background-color: #ce5043 
    } 

    .menu-bar-menu li a { 
     display: block; 
     padding: 10px 20px; 
    } 

여기에 바이올린입니다.

Answer 2

: 그것은 모두 li 요소를 돌봐 및

.menu-bar-menu li:hover, .menu-bar-menu li:hover a { 
    background-color: black; 
} 

그 자식 앵커가 li이 쳐 졌을 때

데모 : http://jsfiddle.net/DajQ9/1/

Answer 3

이 문제를 해결하는 방법은 다양하지만 li과 li을 한 번에 스타일을 지정할 때 컨테이너와 링크를 모두 채우는 것이 문제의 근원입니다. 남은 부분은 안에 패딩이 있고 패딩이있는 a 태그이며 li 태그의 패딩은 변경되지 않은 색입니다. 추가하여 :

.menu-bar-menu li{ 
    padding:0; 
    margin:0; 
} 

당신이 선언 한 후에, 이것을 고치거나 선언을 분리하여 좀 더 명확하게 할 수 있습니다. 의심 할 여지없이 Firefox 용 Firebug 확장 프로그램과 같은 도구가 가장 친한 친구가 될 것입니다. 그것을 시작할 수 있고 페이지의 항목을 클릭하면 정확한 부분에 영향을주는 스타일을 볼 수 있습니다 ... 이동하는 동안 강조/테두리만으로도 어떤 일이 일어나는지 알 수 있습니다.

Answer 4

yoy는 호버 동작을 적용 할 요소에 패딩을 적용해야합니다. 여기에 코드가 업데이트되었습니다. http://jsfiddle.net/dnPmE/1/

CSS :

.menu-bar-menu li, .menu-bar-menu li a { 
    list-style: none; 
    float: left; 
    text-align: center; 
    text-decoration: none; 
    color: #ffffff; 
    font-size: 16px; 
    font-weight: 400; 
} 
.menu-bar-menu li a{ 
padding: 12px 40px 14px 40px;  
} 
.menu-bar-menu li a:hover { 
    background-color: black; 
} 
.color1 { 
    background: #ce5043; 
} 
.color2 { 
    background: #fb8521; 
} 
.color3 { 
    background: #444444; 
} 
.color4 { 
    background: #b3c833; 
} 

이 링크를 방문