如何在 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

如果可能，请将链接移动到父项中。 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;
 }

Answer 2

很简单。只需将您的图像放在另一个 div 中，我们称它为 main-div 并将此代码放在 css 中。

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

display:block;
}

这是结果http://jsfiddle.net/xejmq48r/

无需使用任何类型的Javascript。

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

How to display two links over an Image onmouseover event?

html

css

onmouseover