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

Question

Here my first div shows an image. If you mouse hover on the image then it should show another div named hdiv .

Here $pitem[6] return data from database with 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

Try this

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

Check it here JsFiddle

Answer 2

try this...

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

let me know if you want any further guidance..

Answer 3

You can do it with pure CSS:

1. When .hdiv is next to .pcimg

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

Fiddle

2. When there is gap between .hdiv and .pcimg

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

Fiddle

Note : Internal styles have higher priority than External styles.So for giving External styles more priority !important is needed

Answer 4

Try this in CSS. You need to use !important to override the inline style "display:none"

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

Answer 5

You can do it like this with onmouseover and onmouseout events using jquery:

<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>

if you have multiple instances of this block, all of the images will be visible though. to distinguish which one is hovered you can send hideDiv(this) and get which image hovered to show appropriate image.