CODEWITHSUNDEEP
css
NikM
NikM

Reputation: 317

Show <div> with css 3

I have a question, I have one class and one div. The class is set on display:none, when mouse hover I have to show first div (this is set in display:block)

I have tried:

.1:hover + div#2

{
    display: block;
}

but it doesn't work. Does anyone have some idea to make this in css3? Thanks to everybody!

Upvotes: 0

Views: 86

Answers (2)

leoMestizo
leoMestizo

Reputation: 1499

This is what do you want? DEMO

I used visibility property.

If you want a better effect, you can do this: DEMO with transition

If you want to use display property, you only have to put these properties:

div#two {
    display: none;
}

div#one:hover + div#two {
    display: block;
}

When the markup is:

<div id="one"></div>
<div id="two"></div>

The + (plus) selector is for "target" the adyacent element.

This is a good article about CSS selectors.

PS: You can't do this:

<div id="1">...</div>

Because you can't use number as identifiers.

Be good, Leonardo

Upvotes: 2

lloan
lloan

Reputation: 1403

Well here is a variant of what you could do on a hover to show another div under that one.

JSFIDDLE

HTML

<div class="box">
    <div class="hide"></div>
</div>

CSS

  .box {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: red;
}
.hide {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: blue;
    opacity: 0;
    z-index: 100;
}
.box:hover .hide {
    opacity: 1;
}

Also, if you want the second div to appear under the first one - you could do something like this instead...

.box:hover .hide {
    opacity: 1;
    top: 200px;
    -webkit-transition: top .6s;
}

Upvotes: 0

Related Questions