display specific div on hover? using css and html only

Question

I want to show second div (in HTML) with class dikha on cursor hover over anchor tag.

HTML CODE:

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

STYLE

div {
display: none;
}

a:hover > div:nth-child(2) {
display: block;
background-color: RED;
height: 250px;
width: 960px;
}

James Donnelly · Accepted Answer · 2013-03-21 09:09:05Z

6

Write like this:

a:hover ~ .dikha {
    display: block;
    background-color: RED;
    height: 250px;
    width: 960px;
}

edited Mar 21, 2013 at 9:09

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

answered Mar 21, 2013 at 9:06

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

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

Comments

Andy E · Accepted Answer · 2013-03-21 09:06:52Z

3

You need to use the adjacent siblings selector ~. Also, the div you want to show is the third child, not the second (because the <a> is the first).

div {
    display: none;
}
a:hover ~ div:nth-child(3) {
    display: block;
    background-color: RED;
    height: 250px;
    width: 960px;
}

Demo: http://jsfiddle.net/3eFhf/

answered Mar 21, 2013 at 9:06

Andy E

346k86 gold badges482 silver badges452 bronze badges

1 Comment

Hafiz Over a year ago

Thanks it worked. another problem i was having is with DREAMWEAVER it wasnt showing exact results. thanks

suhail · Accepted Answer · 2013-03-21 09:33:49Z

-1

you can use javascript function here.

< onmouseover="document.getElementById('myid').style.display='block'">

< id="myid" class="dikha">

Your dikha class should be hidden by default

.dikha { display:none; }

you can also use jquery slidetoggle method to achieve this

edited Mar 21, 2013 at 9:33

answered Mar 21, 2013 at 9:24

suhail

3601 gold badge5 silver badges15 bronze badges

2 Comments

Ander2 Over a year ago

question stands for "using css and html only"

Hafiz Over a year ago

sorry i mentioned in question heading that i only require it to be done using css n html.. thanks

Collectives™ on Stack Overflow

display specific div on hover? using css and html only

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related