하이퍼 링크를 가리키며 큰 배경 영역을 강조 표시합니다.

Question

HTML 및 CSS를 사용하여 하이퍼 링크의 기본 영역보다 큰 부분을 강조 표시하려면 어떻게해야합니까? Google 탐색 링크 (캘린더, 문서, 리더 등)와 비슷한 기능을 제공합니다.

나는 링크가 div에 HyperLink 포장 및 사업부의 background-color을 변경하여 클릭 할 때이 작업을 수행 할 수 있지만, 호버에 작업을 수행하는 방법을 알아낼 수 없습니다. Google 내비게이션과 유사한 솔루션의 예는 무엇입니까?

Answer 1

CSS의 a : hover psuedoclass에서 배경색을 변경하십시오.

이 태그는 모든 태그에 적용되므로 하나만 사용하려는 경우 id를 사용하십시오.

a:hover 
{ 
    background: blue; 
} 

Answer 2

표시하려면 : "a"를 막아서 너비와 높이를 줄 수 있도록하십시오. 예를 들어 :

a { 
    display: block; 
    width: 300px; 
    height: 200px; 
} 

그리고

a:hover { 
    background-color: #000; 
} 

Answer 3

이 기본 예제와 비슷한 의미하는 경우 : http://jsfiddle.net/z6B9X/
링크의 배경 (큰 기본 영역보다) 변경 후 이 기초로 시작하고 거기에서 가십시오.

다음 단계는 링크에 배경 이미지를 추가하고 마우스 오버시 배경을 변경하는 것입니다. 테두리, 이미지를 왼쪽 또는 오른쪽 등에 추가하십시오 ...