javascript - onmouseover="document.getElementById 多个 div

Question

我有一个简单的问题。我正在制作某种简单的图片库。 我有一个 div，里面有一张图片。当我将鼠标悬停在 div 上时，另一个小 div 将从 display:none 变为 displaye:block，因此它以一半不透明度显示在图像上方。该 div 包含有关图像的一些信息

代码:

<div class="box col6" 
onmouseover="document.getElementById('onhover').style.display = 'block';" 
onmouseout="document.getElementById('onhover').style.display = 'none';">

<div id="onhover" style="display:none;">THIS IS THE DIV THAT WILL SHOW UP ON HOVER OF BOX COL6</div>

<img src="img/final.png" width="762" height="601">
</div>

这一切都运行良好。但现在我想对带有图像的多个 div 执行此操作。仅复制此 div 是行不通的，因为 onmouseover 和 out 不会知道它们要更改哪个“onhover”div。

有人知道解决办法吗？

Answer 1

使用一些 CSS 魔法:

<div class="box col6">
    <div class="onhover">
        THIS IS THE DIV THAT WILL SHOW UP ON HOVER OF BOX COL6
    </div>
    <img src="img/final.png" width="762" height="601">
</div>

CSS

.box .onhover {display: none;}
.box:hover .onhover {display: block;}

演示:http://jsfiddle.net/maniator/SLfK7/