带有多个链接的 HTML/CSS 悬停

Question

有没有办法让网页上的图片悬停时变成两个不同的链接图片？我想在那里放主图片，但是当您将鼠标悬停在“手机”图片上时，您可以选择您感兴趣的产品(Apple 或 Android)。然后您可以点击 Apple 并被重定向到 [站点 A] 或单击 Android 并定向到 [站点 B]。

Answer 1

这是一个纯 CSS 解决方案:http://jsfiddle.net/QArRL/ .

HTML:

<div id = "image"><a href = "#">apple</a><a href = "#">android</a></div>

CSS:

#image {
    width: 200px;
    height: 100px;
    box-sizing: border-box;
    background: url(http://placehold.it/200x100) no-repeat;
}

#image > a {
    display: none;
    width: 50%;
    height: 100%;
    text-align: center;
    font: bold 12px/100px Sans-Serif;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    background-color: rgba(100, 100, 100, 0.9);
}

#image:hover > a {
    display: inline-block;
}