Question

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

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

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

Answer 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 Example

以HTML格式命名为图像的可单击区域

1 个答案: