如何在Image onmouseover事件上显示两个链接？

Question

我需要在将鼠标悬停在图像上时显示指向另一页的两个链接，如下所示

我使用一些CSS和Java脚本实现了这一点，但我发现这不是有效的方法，特别是我的java脚本导致了一些循环，到目前为止我所做的是：

Java的脚本：

function showitems(){
if(document.getElementById('divsub1').style.display=="block"){
    document.getElementById('divsub1').style.display="none";
    document.getElementById('divsub2').style.display="none";
    }
else{
    document.getElementById('divsub1').style.display="block";
    document.getElementById('divsub2').style.display="block";
    }
}

CSS：

.mainimage{
background-color: #CC6633;
height: 200px;
width: 200px;
}
.divsub1{
display: none;
position: absolute;
float: left;
width: 50px;
height: 20px;
margin-top: -30px;
margin-left: 10px
}
.divsub2{
display: none;
position: absolute;
float: left;
width: 30px;
height: 20px;
margin-top: -30px;
margin-left: 160px;
}

HTML：

<a href="1"><img src="56.jpg" class="mainimage" id="mainimage" onmouseover="showitems()" onmouseout="showitems()"/></a>
<div class="divsub1" onmouseover="showitems()" onmouseout="showitems()" id="divsub1"><a href="2">link1</a> </div>
<div class="divsub2" onmouseover="showitems()" onmouseout="showitems()" id="divsub2"><a href="3">link2</a></div>

我确定这不是最好的方法，而且我没有太多的CSS经验，等待评论!!

Answer 1

这非常简单。只需将您的图片封装在另一个div中，我们将其称为 main-div ，并将此代码放入css中。

#main-div:hover>#divsub1,
#main-div:hover>#divsub2{

display:block;
}

结果为http://jsfiddle.net/xejmq48r/

无需使用任何类型的Javascript。

Answer 2

如果可能，请移动父级内的链接。 css变得更容易：

<div href="1" class="outer">
  <img src="56.jpg" class="mainimage" id="mainimage" />
  <a href="2">link1</a>
  <a href="3">link2</a>
</div>


.outer .inner{ display: none; }
.outer:hover .inner{
   display: block;
 }