How to display a div when hovering over another div

shanto Published at Dev

shanto

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>

Osman M Elsayed

Try this

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

Check it here JsFiddle

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-03-14

Comments

0 comments

How to scroll up a div when hovering over another element

Change the Brightness of a div when hovering over another div

How do add a class to another div, when hovering over one div?

Display DIV when hovering another DIV's child CSS

How to display a div when hovering over another div

How to display a div when hovering over another div

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

pump.io port in URL

How to import an asset in swift using Bundle.main.path() in a react-native native module

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

BigQuery - concatenate ignoring NULL

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

How to remove the extra space from right in a webview?

Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

How to use merge windows unallocated space into Ubuntu using GParted?

flutter: dropdown item programmatically unselect problem

Pandas - check if dataframe has negative value in any column

Nuget add packages gives access denied errors

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

Generate random UUIDv4 with Elm

Client secret not provided in request error with Keycloak