CSS/HTML: Appearing div on hover not working

Question

What I want is I have an invisible div somewhere, and then when you hover over it it appears (maybe with a transition, not necessary.). So I've tried the following:

-- CSS code

div.appearingBox {
display: none;
width: 100px;
height: 100px;
}

div.appearingBox:hover {
display: block;
width: 100px;
height: 100px;
background-color: rgb(0,0,0);
border: 1px solid rgb(0,0,255);
}

-- HTML code (Added)

<html>
    <body>
        <div class="appearingBox">
        </div>
    </body>
</html>

This doesn't work... Please help!

Trying for something like this? jsfiddle.net/2K6JE/1

BuddhistBeast
– BuddhistBeast

2014-02-21 18:55:00 +00:00
Commented Feb 21, 2014 at 18:55 — BuddhistBeast
– BuddhistBeast, Commented Feb 21, 2014 at 18:55

David Ly · Accepted Answer · 2014-02-21 19:02:27Z

5

You'll need a wrapping div. Because it's not visible, it can't respond to :hover. Note that the :hover is on the wrapper instead of the element itself. That is because the wrapper is "visible" but transparent.

http://jsfiddle.net/Cs87c/1/

HTML:

<div class="appearingBox">
    <div>Hidden</div>
</div>

CSS:

.appearingBox div {
    visibility: hidden;
    width: 100px;
    height: 100px;
}

.appearingBox:hover div {
    visibility: visible;
    width: 100px;
    height: 100px;
    background-color: rgb(0,0,0);
    border: 1px solid rgb(0,0,255);
}

(Edited to a cleaner version)

edited Feb 21, 2014 at 19:02

answered Feb 21, 2014 at 18:56

David Ly

31.7k27 gold badges123 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BuddhistBeast Over a year ago

I agree, nice job on figuring this out.

superUntitled Over a year ago

I have updated Davy8's answer to add a transition... jsfiddle.net/Cs87c/2

Travis Over a year ago

@superUntitled Such a simple thing but makes it so much more elegant i have been using this on all my hovers for a while now and wish more dev would do the same. great addition :)

Collectives™ on Stack Overflow

CSS/HTML: Appearing div on hover not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related