Hovering over parent keeps child hover effect, possible? - css

Question

I have the following html:
<div class="parent">
<div class="sibling" data-modal=".child"></div>
<div class="child"></div>
</div>
When I hover over the sibling element, its border changes color and causes the child to show. I want to hold that styling whether sibling or child are hovered over.
I could add the css permanently to sibling using JS, then remove it on mouseleave but would prefer a css solution if possible
CSS:
.parent {
position:relative;
width:250px;
height:200px;
background-color: #f1f1f1;
}
.sibling {
width:100px;
height:30px;
padding:6px;
border:4px solid red;
}
.sibling:hover {
border-color: green;
}
.child {
position: absolute;
width:200px;
height:50px;
top:70px;
background: blue;
display: none;
}
Is this possible?
Here's a fiddle

Answer 1

i am not so sure if i get you right, but is this something you would need?
.parent {
position:relative;
width:1000px;
height:200px;
}
.sibling {
width:100px;
height:30px;
padding:8px;
border:1px solid red;
}
.sibling:hover {
border-color: blue;
}
.sibling:hover + .child {
display: block;
}
.child {
position: absolute;
width:200px;
height:50px;
top:60px;
background: blue;
display: none;
}
<div class="parent" data-modal="child">
<div class="sibling"></div>
<div class="child">test</div>
</div>
pure css solution

Answer 2

Yes,
Add a hover condition to the parent.
.parent {
position:relative;
width:250px;
height:200px;
background-color: #f1f1f1;
}
.sibling {
width:100px;
height:30px;
padding:6px;
border:4px solid red;
}
.parent:hover .sibling, /* here */
.sibling:hover {
border-color: green;
}
.child {
position: absolute;
width:200px;
height:50px;
top:70px;
background: blue;
display: none;
}
<div class="parent">
<div class="sibling" data-modal=".child"></div>
<div class="child"></div>
</div>

Answer 3

Yes its possible
$( ".parent" ).mouseenter(function() {
var divName = $(this).data('modal');
$(divName).fadeIn('fast').animate({
'top': '30px'
}, {duration: 'slow', queue: false}, function() { /*Animation complete*/ });
});
.parent {
position:relative;
width:1000px;
height:200px;
}
.parent:hover .sibling{border-color: #000;}
.sibling {
width:100px;
height:30px;
padding:8px;
border:1px solid red;
}
.child {
position: absolute;
width:200px;
height:50px;
top:60px;
background: blue;
display: none;
}
<div class="parent" data-modal="child">
<div class="sibling"></div>
<div class="child"></div>
</div>

Answer 4

You dont need javascript, pure CSS solution exist. Refer CSS selectors and the "+" selector is what you need to control sibling classes.
So in your case,
.sibling:hover + .child{
display:block;
}
controls the child class when the sibling class is hovered on.
.parent {
position: relative;
width: 1000px;
height: 200px;
background: pink;
}
.sibling {
width: 100px;
height: 30px;
padding: 8px;
border: 1px solid red;
background: blue;
}
.child {
position: absolute;
width: 200px;
height: 50px;
top: 60px;
background: green;
display: none;
}
.sibling:hover {
border: 3px solid green;
}
.sibling:hover + .child {
display: block;
}
<div class="parent" data-modal="child">
<div class="sibling"></div>
<div class="child"></div>
</div>
Hope this helps