Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nested divs of same class, show child on hover

Tags:

html

css

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.

like image 556
CdB Avatar asked Sep 16 '13 13:09

CdB


People also ask

How do you show a div on hover of another div?

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.

Can a div have hover?

You can attach styles to a div by using the :hover keyword.

Why Hover is not working on div?

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.


1 Answers

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)

html

<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>

css

.hoverArea:hover > .inner{
    display: block;
}

Demo at http://jsfiddle.net/Nb6tD/7/

like image 180
xec Avatar answered Sep 28 '22 10:09

xec