이미지 호버팅이 작동하지 않습니다.

Question

나는 몇 개의 이미지 맵을 만들었습니다.

특정 지역 위로 마우스를 가져 가면 상단에 도장이 표시됩니다. 이 기능은 Chrome에서 완벽하게 작동하지만 Firefox 또는 IE에서는 작동하지 않습니다.

왜 이것이 작동하지 않는가에 대한 조언이 있으십니까?
HTML :

<area class="name sold" 
     shape="poly" 
     coords="121,282,101,277,93,259,93,231,103,212,131,207,157,229,149,272," 
     href="#" alt="" title="" /> 

CSS는 :

.name 
{ 
    position: absolute; 
    top: 225px; 
    left: 50px; 
    display: block; 
    width: 150px; 
    height: 150px; 
    z-index: -100; 
} 
.name.sold:hover 
{ 
    background-image: url('sold.png'); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    z-index: 100; 
} 
.name.sale:hover 
{ 
    background-image: url('forsale.png'); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    z-index: 100; 
} 

지역은 작동하지만 유혹 할 때 그냥 아무것도하지 않습니다. 여기

라이브 예 : http://jonasgeuens.be/test/

Answer 1

내가 잘못 될 수 있지만 그 이미지 맵을 사용하면 원래 이미지 맵의 맨 위에, 여기 즉, 장소 작은 이미지 작업을 수행하려고하는 일을 할 수 있다고 생각하지 않습니다 .

정상적인 연습은 아마도 자바 스크립트를 사용하는 것입니다.

또는 큰 이미지를 DIV (또는 낮은 z- 인덱스가있는 일반 이미지)에 배치 한 다음 절대 위치 지정과 높은 z- 인덱스 및 디스플레이를 사용하여 링크를 배치 할 수 있습니다 :블록. 그런 다음 링크를 가져 가면 작은 이미지를 보여줄 수 있습니다.