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 show a notification bar on Top after n seconds with transition from top to down?

    How to get these timestamps, which come after in the html, to float right on the same line

    How do I get MS Outlook to accept the CSS style display:block?

    How do I “smarten” my HTML/CSS tables so text fits to one line (cleverly)

    How to convert css long to css one line style with Notepad++

    How to apply css class to a based on respective $value in a of that row in a repeat region

    How to create a dotted shadowy effect on an image with CSS?

    How to make left menus height dynamic

    How to set a css class of the widget type with Symfony2

    How to make page border in print CSS for every single page

    How to output element.style.marginTop using digits only?

    How to create a nested vertical menu with horizontally sub-menus using css

    How to use a JQuery Show/Hide script, to show hidden text

    How to avoid click on within an from triggering click event on without Javascript/jQuery?

    How to get overlay to fill scrollable parent using pure CSS?

    How to properly display content when I resize the window?

    How to write css for a div under a div which specific id which is itself under a div with specific class?

    several questions about how to work with divs

    CSS how to vertical align div in a div against a sibling div (inline-block)

    How to have an image incorporate in my text ? HTML CSS

    How can I create Input field over full screen, image slideshow

    How to prevent outside CSS from overriding web component styles

    How to correct checkbox position, when it is one the same page with jQuery UI input text?

    How to align text vertically equal top CSS

    Determining if shown dates in a table are before today's date using jQuery

    How to format the text below using css

    How to position one element relative to a separate element in CSS

    How to vary the tone of an image dynamically using only css?

    How to re-use common css rules in css( sass ) [closed]

    How can I make a CSS glass/blur effect work for an overlay?