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

复制粘贴代码后，为所有onhover 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。

onmouseover =“document.getElementById for multiple divs

2 个答案: