0

有什么方法可以命名图像的可点击区域？在鼠标悬停时，必须突出显示名称。

http://www.fifa.com/worldcup/destination/index.html

如果您访问上述链接，目的地的名称会突出显示。

4

1 回答 1

1

在您提供的链接中是如何完成的，他们将图像设置为 div 的背景，然后使用绝对定位来放置可点击区域：
HTML

<div>
    <span>Pepperoni!</span>
    <span>Cheese!</span>
    <span>Tomato!</span>
</div>

CSS

div{
    background: url(http://www.lorempizza.com/200/200);
        background-size:cover;
    width:500px;
    height:500px;
    position:relative;
}
span{
    display:block;
    background:white;
    border-radius:5px;
    width:100px;
    text-align:center;
    padding:10px;
}
span:hover{
    background:lightblue;
    font-size:20pt;
   }
span:nth-child(1){
 position:absolute;
    top:100px;
    left:300px;
}
span:nth-child(2){
 position:absolute;
    top:300px;
    left:100px;
}span:nth-child(3){
 position:absolute;
    top:400px;
    left:300px;
}

JSFiddle 示例

于 2014-06-25T17:19:07.400 回答