多个div的onmouseover =“ document.getElementById

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/

Answer 2

复制粘贴代码后，所有悬停div都有不同的ID。

例：

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

<div id="onhover1" 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 class="box col6" 
onmouseover="document.getElementById('onhover2').style.display = 'block';" 
onmouseout="document.getElementById('onhover2').style.display = 'none';">

<div id="onhover2" 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>

现在可以使用。 具有唯一的ID。