CSS 호버 발행 (채움)

메뉴 항목 주위에 패딩을 넣고 마우스를 가져 가면 배경색이 변경됩니다. 그러나, 순간에 패딩은 요소의 측면에만 영향을 미치고 위쪽이나 아래쪽에는 영향을 미치지 않습니다.CSS 호버 발행 (채움)

HTML :

<html> 
<head> 
    <link rel="stylesheet" href="style.css" type"text/css" /> 
</head> 
<body> 
    <div id="container"> 
     <div id="header"> 
      <ul id="menu"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="index.html">About</a></li> 
       <li><a href="index.html">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

CSS :

이

#container { 
    margin:auto; 
    border:1px solid black; 
    width:960px; 
    height:700px; 
} 

#header { 
    width:960px; 
    height:150px; 
    border: 1px solid blue; 
} 

#menu { 
    width:800px; 
    list-style:none; 
} 

#menu li { 
    float:left; 
    margin-left:20px; 
    border:1px solid black; 
} 

#menu a:hover { 
    background:blue; 
    padding:20px; 
} 

#menu a { 
    padding:20px; 
    height:20px; 
    text-decoration:none; 
}

출처

2012-02-16 ritch

간단하게 내가 볼 수있는 것과 중복 보인다 #menu aheight하는 한 display:block와 height:20px를 교체합니다.

#menu a { 
    padding:20px; 
    display:block; 
    text-decoration:none; 
}

출처

2012-02-16 12:32:49 Marcel

이것은 효과가 있습니다. 감사. – ritch

CSS 호버 발행 (채움)

답변

관련 문제