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。

用css创建图像映射？

1 个答案: