Show on hover using CSS and HTML only

Question

How to show a child div when hovering anchor tag? I want to show a div with class botm when cursor hovers anchor tag. This is the exact scheme I am using so kindly keep tags in the same order:

HTML:

<a> Hover me!</a>
<div class="faraz"> sdjfg 
<div class="dikha">Stuff shown on hover</div>
<div class="botm"></div>
</div>

CSS:

div {
display: none;
}

a:hover ~ .faraz > .botm {
display: block;
background-color: RED;
height: 250px;
width: 960px;
}
.botm {
background-color: #0CC;
height: 50px;
width: 100%;
position: fixed;
top: 90px;
}

Musa · Accepted Answer · 2013-03-22 05:49:46Z

3

The parent of your targeted div is hidden therefore it cannot be shown. Show the parent as well and every thing will work.

a:hover ~ .faraz{
    display:block;
}

http://jsfiddle.net/r2Zyp/

answered Mar 22, 2013 at 5:49

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

2 Comments

Hafiz Over a year ago

Perfecto...THANKS i wish my reputation is atleast 15 so i can give u +

Hafiz Over a year ago

please have a look at this code jsfiddle.net/farazi482/r2Zyp/2 i want to show menuDropDOWN class div only when i hover list items under links class div

Collectives™ on Stack Overflow

Show on hover using CSS and HTML only

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related