Skip to main content

How to show/ hide child element on mouse hover of parent element -CSS

In this tutorial, you learn how to show or hide child element of parent element. simply doing this with html and CSS. There are two DIV, child div contain two button controls and child div to keep in parent div. when parent div mouse hover action happened , child div will display . let's try it …!


<!DOCTYPE html>
<html class="k-ff k-ff43">
<head>
    <title>Display element in hover </title>
    <style>
        .parent {
            min-height: 200px;
            min-width: 500px;
            padding: 20px;
        }

        .child {
            position: relative;
            float: right;
            top: 0px !important;
            left: 0px !important;
            padding: 5px;
            display: none;
            height: 45px;
            width: 200px;
            min-height: 40px;
            min-width: 40px;
        }

        .parent:hover .child {
            display: block;
        }

        .parent:hover {
            border: 2px dotted red;
        }
    </style>
</head>
<body>
    <div class="parent">
        1.Question 1
    <div class="child">
        <button id="Edit" data-role="button" role="button" aria-disabled="false" tabindex="0">Edit</button>
        <button id="Delete" data-role="Delete" role="button" aria-disabled="false" tabindex="0">Delete</button>
    </div>
    </div>

</body>



Labels:

Comments

Post a Comment

Popular posts from this blog

What are the difference between DDL, DML , DCL and TCL commands?

Database Command Types DDL Data Definition Language  (DDL) statements are used to define the database structure or schema.  -           CREATE - to create objects in the database -           ALTER - alters the structure of the database -           DROP - delete objects from the database -           TRUNCATE - remove all records from a table, including all spaces allocated for the records are removed -           COMMENT - add comments to the data dictionary -           RENAME - rename an object DML Data Manipulation Language  (DML) statements are used for managing data in database. DML commands are not auto-committed. It means changes made by DML command are not permanent to d...
2 comments
Read more

Ubuntu/Unix Console Command -Cheat Sheet

M ost popular Linux/Unix command those are required to know during working on Linux/Unix environment. Primarily, when I started the work on ubuntu, I faced a common problem that was not familiar to know about the basic ubuntu command. After that, I aggregate basic commands and work very well. Besides that, most of the time forgot the command and this helps me to cut-down googling time. Privileges SL Command Use / Description 1 sudo command Run command as root 2 sudo -s Open a root shell 3 sudo -s -u user Open a shell as user 4 sudo -k Forget sudo passwords 5 gksudo command Visual sudo dialog (GNOME) 6 kdesudo command visual sudo dialog (KDE) 7 sudo visudo edit /etc/sudoers 8 gksudo nautilus root file man...
Post a Comment
Read more

SQL Server blocked access to procedure ‘sys.sp_OACreate’ of component ‘Ole Automation Procedures’

I am working on banking project. For migration purpose, I will call web service in store procedure and based on this response I will  process another task. Create a Procedure named WebserviceCall CREATE procedure WebserviceCall @ UsrID as varchar ( 50 ) , @ Password AS Varchar ( 50 ) , @ AccountNo AS Varchar ( 50 ) AS BEGIN DECLARE @ obj INT DECLARE @ ValorDeRegreso INT DECLARE @ sUrl VARCHAR ( 200 ) DECLARE @ response VARCHAR ( 8000 ) = 'Failed' DECLARE @ hr INT DECLARE @ src VARCHAR ( 255 ) DECLARE @ desc VARCHAR ( 255 ) BEGIN TRY SET @ sUrl = 'http://x.x.x.x/mtcwebservicetest/Service.asmx/GetSession?UserID=' +@ UsrID + '&Password=' +@ Password + '' ; EXEC sp_OACreate 'MSXML2.ServerXMLHttp' , @ obj out EXEC sp_OAMethod @ obj, 'open' , NULL , 'GET' , @ sUrl, false EXEC sp_OAMethod @ obj, 'send' --EXEC sp_OAGetProperty @obj,'responseText',@response out ...
Post a Comment
Read more