Show on hover using CSS and HTML only


Tags: html,css,html5,css3

Problem :

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;
}


Solution :

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/


    CSS Howto..

    How to create vertically centered meeting borders on a div?

    3 column layout, same height, middle column full size. How to do it without “table-cell”

    Why does overflow hidden affect height and how can I fix it in this example?

    android - How to build complex views that stretch?

    How to animate top % after a delay?

    How to put an image at the left side of text without putting the image into css

    How do you manage css stylesheet files and inclusions in a large ruby on rails application?

    links are showing up on each line, instead of inline

    How do I wrap a long string in a fixed-width container with CSS?

    How to make CSS URL background images show up in localhost?

    JavaFX 8 - How to change the color of the prompt text of a NOT editable combobox via CSS?

    How to local storage expand/collapse CSS settings

    How to set CSS3 ::selection using Javascript

    How to give menu sub menu options

    how to Styling a “choose file” button using css Only

    How to horizontally center a link element with CSS?

    How to fix the headline row in a table using css? [closed]

    Buttons on bootstrap timepicker is not showing

    How to normalize a button and an anchor with CSS?

    How to get an outline border on a colgroup?

    How to morph multi-part css properties with Mootools Fx?

    How to set min-font-size in CSS

    How do I create a border for an image?

    How do you apply a fading overlay to an image in CSS?

    How do I change the Default Design? [closed]

    Basic CSS: When applying effects to images in CSS, how do you exclude the banner image?

    How can I make buttons flash different background colors when clicked/

    Hovering over item in WordPress list of pages shows Featured Image

    how to make background 100% on a top menu

    Showing HTML page with CSS attached in a WebView