display specific div on hover? using css and html only

问题

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

回答1:

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/

回答2:

Write like this:

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

回答3:

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

来源：https://stackoverflow.com/questions/15543159/display-specific-div-on-hover-using-css-and-html-only