마우스를 가져 가면 배경 이미지가 나타납니다

Question

마우스를 움직이면 내 탐색 메뉴가 사라지고 마우스가있는 메뉴 뒤에 배경 이미지가 나타납니다.

<ul id="nav" class="group"> 
    <li><a href="#" id="nav-portfolio">portfolio</a></li> 
    <li><a href="#" id="nav-blog">blog</a></li> 
    <li><a href="#" id="nav-me">me</a></li> 
    <li><a href="#" id="nav-contact">contact</a></li> 
    </ul> 

을 그리고 그것을위한 CSS는 다음과 같습니다 :

이

#nav { 
    float: right; 
    margin: 0.9em 1.5em 1em 0.9em; 
    padding-right: 2em; 

} 

#nav li { 

    float: left; 
    padding: 0 0 0 .9em; 
} 

Answer 1

참이에 대한 :hover을 사용할 수 있습니다 : 다음과 같이

나는 간단한 탐색 메뉴가

#nav li:hover { 
    background: url("image.png") center center no-repeat; 
} 

Answer 2

이미 이미지가 메뉴 뒤에있는 경우 메뉴 또는 활성 옵션을 사라지게 만하면됩니다.

코드에는 이미지가 없지만 어쨌든이 코드는 트릭을 수행해야합니다.

#nav li:hover a { color:transparent; } 
#nav li:hover { background: url("image.jpg"); } 

안녕 당신은 싱글 침대없이 URL을 사용하고, 예를 들어 절대 주소를 사용

Answer 3

#nav li:hover { background: url(/yourRootAddress/YourFileOrFolderImage/image.jpg); }