Search code examples
javascriptcsshtmlhoverhidden

Hide div when hovering another div

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.

Solution

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