Question

这里我的第一个div显示了一个图像。如果您将鼠标悬停在图像上，则应显示另一个名为hdiv的div。

这里$ pitem [6]使用php for loop返回数据库中的数据。

CODE

<div class="pcimga">
    <div class="pcimg"><img src="Portfolio_Image/'.$pitem[6].'" class="pcimg" /></div>

        <div class="hdiv" style="display:none;">
           <span class=" butnn"><a data-toggle="modal" href="#myModal'.$pitem[0].'">View</a>
        </div>          
</div>

Answer 1

试试这个

$('.pcimga').hover(function() {
    $(this).find('.hdiv').show();
}, function(){
    $(this).find('.hdiv').hide();
});

在此处查看 JsFiddle

Answer 2

试试这个......

.pgimga:hover~.hdiv
{
display:block;
}

如果您需要任何进一步的指导，请与我们联系。

Answer 3

您可以使用纯CSS：

<强> 1。当 .hdiv 紧挨 .pcimg

.pcimg:hover+.hdiv{
    display:block !important;
}

<强> Fiddle

<强> 2。当 .hdiv 和 .pcimg <之间存在差距时/ p>

.pcimg:hover~.hdiv{
    display:block !important;
}

<强> Fiddle

注意：内部样式的优先级高于外部样式。因此，外部样式需要更高优先级!important

Answer 4

在CSS中试试这个。您需要使用！important来覆盖内联样式“display：none”

.pcimg:hover+.hdiv
{
    display:inherit !important;
}

Answer 5

你可以使用jquery：

在onmouseover和onmouseout事件中这样做

<div class="pcimga">
    <div class="pcimg"><img onmouseover='$(".hdiv").show();'  onmouseout='$(".hdiv").hide();' src="Portfolio_Image/'.$pitem[6].'" class="pcimg" /></div>

        <div class="hdiv" style="display:none;">
           <span class=" butnn"><a data-toggle="modal" href="#myModal'.$pitem[0].'">View</a>
        </div>          
</div>

如果您有此块的多个实例，则可以看到所有图像。为了区分哪一个悬停你可以发送hideDiv（这个）并获取哪些图像悬停以显示适当的图像。

如何在悬停在另一个div上时显示div

5 个答案: