CSS로 이미지 맵을 만드시겠습니까?

Question

CSS로 이미지 맵을 만들지 만 작동하지 않습니다. 배경이 이미지이고 배경 그림의 이미지 맵을 만들고 싶습니다. 그러나 마우스를 가져 가면 링크 배경 이미지가 변경되지 않습니다.

이것은 내 HTML 코드입니다.

<section id="centersectioncontact" class="colortext"> 
    <ul id="cantact"> 
    <li id="linkin"><a href="">Link in</a> </li> 
    <li id="twiter"><a href=""> twiter</a></li> 
    </ul> 
    </section> 

이것은 내 CSS 코드입니다.

#centersectioncontact { 
position: absolute; 
top: 14%; 
left: 31%; 
width: 426px; 
height: 426px; 
bottom: 25%; 
right: 25%; 
z-index: 2; 

    } 

    ul#cantact 
    { 
list-style:none; 
background:url(../Images/contact.png) no-repeat 0 0 ; 
position:relative; 
width:426px; 
height:420px; 
margin:0; 
padding:0; 
opacity:0.5; 
    } 
    ul#cantact li{ 
position: absolute; 
border: 1px solid #000; 

    } 
    } 

    ul#cantact a{ 
display: block; 
height: 100%; 

text-indent: -9000px; 
    } 

    #linkin { 
width: 215px; 
height: 140px; 
top: 0px; 
left: 0px; 
    } 
    #twiter 
    { 
width: 215px; 
height: 140px; 
top: 0px; 
left: 215px; 


    } 
    ul#cantact li a:hover { 
background:url(../Images/contact.png) no-repeat 0 0;  
    } 

    ul#cantact li#linkin a:hover { 
background-position: 0 -426px; 
    } 
    ul#cantact li#twiter a:hover{ 
background-position: 0 -426px;} 
    .colortext{ 
margin-top: 7px; 
margin-left: 16px; 
top: 2%; 
left: 2%; 
color: #FFFFFF; 
text-align: left; 
font-size: xx-large; 
z-index: 10000000; 
    } 

Answer 1

귀하의 CSS 코드에는 몇 가지 모순이 있습니다. 이들 중 하나와 '}'추가 문제가 발생할 :

ul#cantact li{ 
    position: absolute; 
    border: 1px solid #000; 
} 
} 

에서

"}"

을 여분을 삭제하고 또한 제거해야 다음에

ul#cantact li#linkin a:hover { 
    background-position: 0 -426px; 
} 

ul#cantact li#twiter a:hover{ 
background-position: 0 -426px; 
} 

을 이미 배경 위치를 정의한 코드는 0 0에

ul#cantact li a:hover { 
    background:url(../Images/contact.png) no-repeat 0 0;  
} 

게다가, -426px 가로로 설정하면 img이 화면에 표시되지 않습니다.