둥근 CSS 탭

Question

내가 만들어 몇 가지 반올림 탐색 탭 CSS 를 사용하는 데 문제가 implementingn hover.

첫째는 여기에 대한 링크를 사이트 탭 그것은 매우 어려운 설명합니다.십시오를 가져가면 왼쪽의 탭을 이해하는 내 문제입니다.나는 아래에 설명되어 있습니다.

나는 배경 이미지 설정에서 #navigation li 항목이 포함되어 왼쪽 모서리고 난 다음 두 번째는 배경 이미지(오른쪽)이 설정을 사용하여 #navigation a.

그러나 때 위에 마우스를 올려놓은 왼쪽의 탭을,작은 조각의 배경은 다음과 같,난 이것 때문에만 리역가였다.물론 나 같은 전체 탭을 강조 표시로 가리면 그것의 나머지.

이것이 상당히 설명하기 어려운 그래서 필요하신 경우에는 질문이 나를 더하는 문제를 이해하십시오.

Answer 1

몇 가지의:

문제를 해결해 패딩 off <li> 그리고 뒤에서 아이 <a> -차지하는 공간이 같아야 함을 얻을 놓을 맞춥니다.

이제 당신은 다른 문제가,왼쪽을 보이지 않는.이를 해결함으로써 배경 색상 a 고 a:hover 동 transparent 신의 색깔-지금 <li> 할 수 있습니다.

마지막으로,나는 당신을 변경하는 행동에서 다른 이미지 완전히 동일한 이미지와는 다른 배경의 위치,그래서 롤오버드 보이지 않게.

편집:css 전복 없이는 이미지 스왑 설명 기

Answer 2

JQuery 그것은 매우 간단합니다!그러나 당신이 시도할 수 있는 확장자:

http://www.usabilitypost.com/2008/11/27/scalable-content-box-using-only-one-background-image/

다음은 배경 이미지에 가져가 수 있습니다.

Answer 3

하거나 교체할 수 있습니다 당신의 리:호버 및:hover 이:

#navigation li:hover {
        background: #009BDA url(images/tab_left_on.gif) no-repeat top left;
        cursor : pointer;
        }

#navigation li:hover a {
        background: #009BDA url(images/tab_right_on.gif) no-repeat top right;
        color: #FFF;
}

참고로 그것은 작동하지 않을 수 있습니다 IE6.