I'm trying to show a hidden div on hover of its parent.
My issue is that there are nested divs of the same class, and when I hover an "inner" div, its parent is also hovered and both their hidden children are shown.
html:
<div class="a_class">
lorem ipsum
<div class="inner">
<a href="">hidden...</a>
</div>
<div class="b_class">
blahblah<br />
<div class="a_class">
<div class="inner">
<a href="">hidden...</a>
</div>
lorem ipsum
</div>
</div>
</div>
css:
.inner{display:none;}
.a_class:hover > .inner{display: block;}
fiddle: http://jsfiddle.net/Nb6tD/
In other words, i'm trying to achieve this: when i hover over the second .a_class, only the .inner under it should show up, not the .inner under the "parent" .a_class.
Is it possible only with css?
Thanks in advance
EDIT: the answer
So, it appears it CAN'T be done with pure css, unless the html markup changes - which is not possible in my case.
I wished for a css3-magic solution, but since there's no such option, i'm going javascript.
I accepted the most suitable solution though for future reference, for all out there that have the possibility of changing the html structure.
To display div element using CSS on hover a tag: First, set the div element invisible i.e display:none;. By using the adjacent sibling selector and hover on a tag to display the div element.
You can attach styles to a div by using the :hover keyword.
You might have linked your stylesheet to your HTML file improperly. Some other CSS in the context of your project may be overriding the piece that you've given here. You might be running into browser compatibility issues with the :hover selector or something else in your code that is breaking the styling.
I don't think you can "fix" this without changing the html structure - you could have an element enclosing the hoverable area and its corresponding button:
Here, i've added a .hoverArea
div. (Extra div not needed on the innermost one, as it only contains a single .inner
)
<div class="a_class">
<div class="hoverArea">
lorem ipsum
<div class="inner">
<a href="">hidden...</a>
</div>
</div>
<div class="b_class">
blahblah<br />
<div class="a_class hoverArea">
<div class="inner">
<a href="">hidden...</a>
</div>
lorem ipsum
</div>
</div>
</div>
.hoverArea:hover > .inner{
display: block;
}
Demo at http://jsfiddle.net/Nb6tD/7/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With