0

我有一个快速的问题。我正在制作某种简单的图片库。我有一个 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。

有人知道解决方案吗？

4

2 回答 2

5

使用一些 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/

于 2012-12-24T15:12:44.513 回答
0

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

于 2012-12-24T15:13:41.717 回答