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

Question

有没有办法在网页上放置图像，当悬停时，会变成两个不同的链接图像？我希望在那里拥有主要图像，但当你将鼠标移到＆＃34; Phones＆＃34;图片，您可以选择您感兴趣的产品（Apple或Android）。然后您可以点击Apple并重定向到[Site A]或点击Android并转到[Site B]。 / p>

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;
}

Answer 2

您正在寻找创建菜单。创建一个包含2个链接的div和css display：none属性集。为您的主链接（电话）设置悬停事件处理程序（例如通过jquery）以切换div的可见性。

#menu { display: none }

 $("#phones").hover(
  function() {
    $("#menu").show();
  }, function() {
    $("#menu").hide();
  });

Answer 3

您可以在' Onmouseover '事件中执行任何操作，只需使用函数使用'onmouseover'注册图像，然后使用该功能动态创建两个图像元素 createElement（'img'），然后使用'imageNode.src'为其提供源代码。而已。完成。

Answer 4

这就是你需要的：

HTML

<div class="menu">
    <img src="" alt="phones">
    <a href=""><img src="" alt="android"></a>
    <a href=""><img src="" alt="apple"></a>
</div>

CSS

.menu{

width:200px;
height:100px;

}

.menu a{

display:none;
width:100px;
height:100px;
float:left;

}


.menu > img{

display:block;
width:200px;
height:100px;

}

.menu:hover > img{

display:none;

}


.menu:hover a{

display:block;

}