1

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;
}
Simon
  • 31,675
  • 9
  • 80
  • 92
hfarazm
  • 1,407
  • 17
  • 22

1 Answers1

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/

Musa
  • 96,336
  • 17
  • 118
  • 137
  • Perfecto...THANKS i wish my reputation is atleast 15 so i can give u + – hfarazm Mar 22 '13 at 06:08
  • please have a look at this code http://jsfiddle.net/farazi482/r2Zyp/2/ i want to show menuDropDOWN class div only when i hover list items under links class div – hfarazm Mar 22 '13 at 06:52