변경 배경 이미지 : 나는 메뉴가

가져 : (. 하단에 둥근 모서리를 포함) 내 버튼을 만들려는 슬라이딩 도어 기술로변경 배경 이미지 : 나는 메뉴가

<div id=menu> 
    <ul=navigation> 
    <li><a href=>Home</a></li> 
    </ul> 
</div>

을

I을 a와 li을 가져 가면이 효과를 얻을 수 있습니다. 그러나 리가 더 크고, 리 위에 마우스를 가져 가면, 리를 가리 키지 않고 배경 이미지 만 나타납니다.

이제 li의 호버와 a의 호버를 CSS 안에 연결하는 방법이 있는지 궁금합니다. 오히려 자바 스크립트를 사용하지 않고이 문제를 해결합니다.

Google이 나를 도와주지 않았습니다. 나는 이것이 가능하지 않다고 생각하지만 다른 옵션을 시도하기 전에 확신하고 싶었다.

사전에 조언/도움/제안을 보내 주셔서 감사합니다.

출처

2010-06-23 Rick de Graaf

당신이에 후 무엇을 할 수 없다 너는 그것을 묘사했다.

그러나 내가 할 수있는 것은 "태그"디스플레이를 블록으로 만들고 "LI"를 채우기 위해 너비와 높이를 설정하는 것입니다 : 호버를 가져 가서 전체 Bg를 변경하면 LI는 또한 "LI"내 적절한 장소에서 텍스트를 앉아서 "LI"에서 패딩을 제거하기 위해 약간의 패딩을 사용

 

li a { 
    background:#000 url(images/bg.png) no-repeat 0 0; 
    display:block; 
    height:20px; 
    width:100px; 
} 
li a:hover { 
    background:#fff url(images/bg.png) no-repeat 0 -20px; 
}

을 변화

리 : 호버 나이에 JS없이 지원되지 않습니다 IE의 버전을 사용하므로 : 대신 hover를 사용하면 크로스 브라우저 호환성이 향상됩니다.

출처

2010-06-23 11:50:09 Brady

당신은 단순히 함께이 작업을 수행 할 수 있습니다

<div id=menu> 
    <ul> 
    <li><a href=>Home</a></li> 
    </ul> 
</div>

당신의 CSS에서 :

#menu ul li:hover{ 
    background-image:url(newimage); 
}

당신이 IE6 준수를 요구하는 경우

, 그냥 당신의 연결은 UL의 전체 폭을 입력합니다.

#menu ul li a:link, #menu ul li a:visited{ 
    display:block; 
    width:999px; <-- enter pixels 
    height:999px; <-- enter pixels 
}

는 정상적으로 배경 이미지를 수정

#menu ul li a:hover{ 
    background-image:url(newimage); 
}

출처

2010-06-23 11:42:14 Sam152

I fi 그것을 밖으로 gazing. Sam152는 나를 생각하고 내 CSS를 확인했습니다. 나는 링크를 내 ul보다 크게 만들기 위해 약간의 패딩과 높이를 변경하여 문제를 파악했습니다. @ 스캇 카리스 (Scott Carris)는 불행하게도 내가 문제를 해결하고 싶지는 않지만 가능하면 문제를 해결하는 대신에 문제를 해결하는 것이 가능하다. 모든 anwsers 주셔서 감사합니다! –

#menu li { 
    /* normal li style */ 
} 

#menu li a { 
    /* normal a style */ 
} 

#menu li:hover { 
    /* hover li style */ 
} 

#menu li:hover a { 
    /* hover a style */ 
}

6으로 작동하지 않습니다 ...

내가 당신을 수집 무엇부터

출처

2010-06-23 11:46:35 petraszd

변경 배경 이미지 : 나는 메뉴가

답변

관련 문제