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>
Comments
Post a Comment