버튼 모양의 링크로 연결

가로 탐색 막대의 링크 위로 마우스를 가져 가면 링크 (단추로 표시됨)의 배경색을 어떻게 변경합니까?버튼 모양의 링크로 연결

코드 내가 탐색 모음의 링크 위에 마우스를 유지하면 HTML

<head> 

     <style> 

       #menu li 
       { 
        display:inline; 
        border-style:solid; 
        boreder-top : none; 
        border-bottom : none; 
        margin-right : -8px; 
        padding-top : 0px; 
        padding-bottom : 0px; 
        padding-left : 25px; 
        padding-right : 25px; 
       } 

       #menu li a:hover{background-color:#00FFFF;} 
     </style> 

    </head> 

    <body> 
     <div id="menu"> 
       <ul class="nav"> 
        <li><a href="index.php">Home</a></li> 
        <li><a href="college.php">College</a></li> 
        <li><a href="education.php">Education</a></li> 
        <li><a href="research.php">Research</a></li> 
        <li><a href="faculty.php">Faculty & Staff</a></li> 
        <li><a href="news.php">News</a></li> 
       </ul> 
     </div> 
    </body>

의, 그것은 단지 콘텐츠 영역의 배경 색상을 변경합니다. 패딩 영역을 무시합니다.

콘텐츠의 배경색 + 패딩을 변경하고 싶습니다.

출처

2014-07-20 Tutu

[JSFiddle]에 코드를 입력하십시오 (http://jsfiddle.net/) – simeg

그건 때문에': hover'는'A'에 대신의 'li'. –

전체 코드로 내 질문을 편집했습니다. 고맙습니다 – Tutu

I는 a 소자 패딩 선언 이동 제안 블록 요소로 나타나면 inline-block 같이 li S를 표시한다.

#menu li { 
    display : inline-block; 
    border-style : solid; 
    boreder-top : none; 
    border-bottom : none; 
    margin-right : -8px; 
    padding-top : 0px; 
    padding-bottom : 0px; 
} 

#menu li a { 
    display: block; 
    padding-left : 25px; 
    padding-right : 25px; 
} 

#menu li a:hover{ 
    background-color:#00FFFF; 
}

DEMO : http://jsfiddle.net/sK2d9/

출처

2014-07-20 15:22:37 JoeJ

Thanx loadz & loadz. 그것은 완벽하게 작동했습니다. – Tutu

당신의 CSS 호버 링크가 조금 벗어난 것 같습니다. 당신이 당신의 버튼을 메뉴의 ID를 제공 한 경우

다음 CSS 형식과 같이 보일 것입니다 :

.menu:hover { 
background-color:#00FFFF; 
}

그 시도, 그게 내가 틀렸을 수도 생각할 수있는 모든하지만 그래입니다.

출처

2014-07-20 15:15:44

예 CSS 호버가 약간 벗어났습니다. 고맙습니다. – Tutu

호버를 <li></li>에 붙여야합니다.
기본적으로 CSS는 패딩 영역 색상도 변경합니다. 이런
는 : [ LINK ]

출처

2014-07-20 15:16:02

감사합니다. sooooooo 많이. 완벽하게 작동합니다. – Tutu

버튼 모양의 링크로 연결

답변

관련 문제