호버에서 div를 제어하는 ​​방법 :

Question

마우스를 올릴 때 메뉴 옵션의 배경색을 변경하는 방법을 찾았습니다. 그러나 옵션을 가져 가면 다른 옵션을 모두 오른쪽으로 이동시키는 넓은 공간을 차지합니다. 일관성있는 공간을 유지하고 싶습니다. 그래서 마우스를 가져 가면 색상 만 변경해야합니다. 옵션이 오른쪽으로 이동합니다. 페이스 북에 메뉴 옵션이있는 방식의 정렬.

이

<div id="menu"> 
    <a href="/hello" id="option">home</a> 
    <a href="/hello" id="option">profile</a> 
    <a href="/hello" id="option">account</a> 
    <a href="/hello" id="option">settings</a> 
    <a href="/hello" id="option">extra</a> 
    <a href="/hello" id="option">logout</a> 
    </div> 

CSS : 아래

코드 당신이 공간을 원하지 않는, 그래서 만약 요소가, 공간을 차지 주위에

div#menu { 
    margin-left: 630px; 
    margin-top:-20px; 
    } 
    option { 
    margin-left: 20px; 
    } 
    #option:hover{ 
    background: #3F2327; 
    padding: 10px; 
    } 

Answer 1

는 padding: 10px;

공간을 제거, 돈 ' 그것을 추가하십시오. 당신이 모든 시간을 원하는 경우뿐 아니라 또한 :hover

---

을 위해 모든 시간을 추가 문제와 관련이없는,하지만 단지 모범 사례 :

• 당신은 아무튼 브라우저를 사용하는 경우 CSS를 지원하지 않거나 꺼져 있거나 그래픽이 아니기 때문에 홈 프로필 계정 설정 추가 로그 아웃 - 링크 목록이있는 경우 list markup을 사용하십시오. guidance on making it pretty이 많이 있습니다.
• id는 문서에서 고유이어야하며 특정 요소를 식별하는 데만 사용하십시오. 한 묶음의 요소가 모두 같은 클래스의 멤버라는 것을 나타내려면 class 속성을 사용하십시오. HTML elements와 동일 클래스와 ID 이름을 사용
• 하지 마십시오, 그것은 단지 코드가

Answer 2

1) 당신은 "옵션"에 # 누락을 혼란하게

2) 당신은 왜 가져가에 패딩 ? 너가 그것의 위에 공중 선회 할 때 운동을 일으키는 원인이 될 것이다.