Show child div on mouse hover of parent - needs javascript?
JavascriptCssJavascript Problem Overview
I need to show a div when you house over its parent (default is for the child div to be hidden). Is the only way to do this with javascript? Thanks
Javascript Solutions
Solution 1 - Javascript
No JS required.
.hidden {
display: none;
}
.parent:hover .hidden {
display: block;
}
<div class="parent">
<p>Hello, I'm a child...</p>
<p class="hidden">..and so am I but I'm hidden.</p>
</div>
Solution 2 - Javascript
@jdln; yes
css:
.outer {
background:red;
height:100px;
}
.box1 {
background:blue;
height:100px;
width:80px;
display:none;
}
.outer:hover .box1{
display:block;
cursor:pointer;
}
check the fiddle: http://jsfiddle.net/sandeep/XLTV3/1/
Solution 3 - Javascript
With jQuery, absolutely:
$("#some_parent").hover(function ()
{
$(this).children("#some_child_div").show();
});
Solution 4 - Javascript
In addition to the accepted answer, one can use opacity
so that layout is not jumping around on hover (this also allows to animate the appearance):
css:
.show-on-hover-parent:hover .show-on-hover-item {
opacity: 1;
//transition: opacity .5s; //<- optional opacity animation
}
.show-on-hover-parent .show-on-hover-item {
opacity: 0;
//transition: opacity .5s; //<- optional opacity animation
}
html:
<div class="show-on-hover-parent">
<div>Always visible 1</div>
<div class="show-on-hover-item">visible on hover</div>
<div>Always visible 2</div>
</div>
Solution 5 - Javascript
I initially was using css solution above, but had to use jQuery because my child div contained an image which caused hover to flicker. Here we're displaying child when hovering over parent (if desktop screen size) on mouseenter and hiding it on mouseleave but only if now hovering over main page container, to minimize flickering:
$(document).ready(function () {
$(".parent-qtip").mouseenter(function () {
if ($(window).width()>=1200)
$(this).children(".child-qtip").show();
});
$(".parent-qtip").mouseleave(function () {
if ($('.page-content').find('.container:hover').length)
$('.child-qtip').hide();
});
});
Solution 6 - Javascript
Using jQuery you can add a mouseover
event to the parent div, and show
the child div. See this fiddle as an example.
Solution 7 - Javascript
Since it's a child element you don't need javascript. Here is an example.
Solution 8 - Javascript
I was having real trouble with this until I found these answers. I managed to get it working with reference to Marcel's.
My solution is below.
.sidenav {
position: fixed;
height: 100%;
background-color: purple;
font-size: x-large;
z-index: 1;
top: 0;
left: 0;
padding: 0px;
}
.nav-item {
color: white;
text-decoration: none;
display: block;
border-radius: 10px;
margin: 5px;
padding: 10px 5px;
border: 1px transparent solid;
}
.nav-item:hover {
background-color: orchid;
}
.nav-icon {
vertical-align: middle;
}
.nav-item-title {
margin: 0 10px;
position: relative;
top: 2px;
}
.fa-circle-question {
position: relative;
left: 2px;
}
.hidden {
display: none;
}
.sidenav:hover .hidden {
display: inline-block;
}
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"
/>
<nav class="sidenav">
<div class="nav-item">
<i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
<h5 class="nav-item-title hidden">
Medium string
</h5>
</div>
<div class="nav-item">
<i class="nav-icon fa-solid fa-house"></i>
<h5 class="nav-item-title hidden">
Short
</h5>
</div>
<div class="nav-item">
<i class="nav-icon fa-solid fa-circle-question"></i>
<h5 class="nav-item-title hidden">
Much much longer string
</h5>
</div>
</nav>