Hide div when hovering another div

Question

so i have a few divs inside divs like this:

  <div class="flip-container">
        <div class="flipper">
            <a href="#" data-reveal-id="pc1">
                <div class="inner" style="background-color:#ea6524;">
                    <p class="text">title</p>
                    <img src="1.png" class="img" />
                </div>
            </a>
        </div>
   </div>

DESCRIPTION: now the flip-container and the flipper are used because when i hover this div i have a css transition triggered which flips the div. the href simply allows to open a div with a description when the inner div is clicked the inner div is a square with inside a text and an image.

WHAT I WANT TO DO: i would like to hide the text "title" and the img "1.png" when i hover the flip-container.

how can i do this?

i tried to add display:hidden to the class text but it works only when i hover the actual text and not when i hover the flip-container background.

thanks for the help

i would prefer a pure css solution if possible, if not also a javascript solution could do.

Answer 1

This should do the trick:

.flip-container:hover .text, .flip-container:hover img {
    display: none;
}

Alternatively, you could use visibility: hidden as this will keep the elements in the document flow, rather than removing them all together.

Answer 2

OP,

In this case, I'd suggest visibility:hidden over display:none; . Here's a fiddle with this approach: http://jsfiddle.net/wEr3T/1/ .

In short, visibility:hidden will literally just hide the element(s)—still taking up the space it did before, thus not affecting the layout.

In contrast, display:none; causes it not to be rendered, thus the space it had previously occupied is now unaccounted for. As such, hovering to show/hide elements that have been set to display:none will likely cause some undesired flickering.

Answer 3

hiding the text and the image when hovering #flip-container by setting display: none may cause flashing and change in layout of the parent container. so instead make them transparent by set visibility: hidden .

.flip-container:hover img {
visibility:hidden
}
.flip-container:hover .text {
visibility:hidden
}

i have created jsFiddle for you.

Answer 4

Try this...

 .flip-container:hover .text, .flip-container:hover img { visibility: hidden; } 

  <div class="flip-container"> <div class="flipper"> <a href="#" data-reveal-id="pc1"> <div class="inner" style="background-color:yellow;"> <p class="text" style="color:red">title</p> <img src="//placehold.it/100x100" class="img" /> </div> </a> </div> </div>