отображение конкретного div на зависании? используя только css и html

Question

Я хочу показать второй div (в формате HTML) с классом dikh a на курсорном курсе над тегом привязки.

HTML КОД:

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

СТИЛЬ

div { 
display: none; 
} 

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

Answer 1

Вы должны использовать прилегающую братьев и сестер селектор ~. Кроме того, div, который вы хотите показать, является третьим ребенком, а не вторым (потому что <a> является первым).

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

Демо: http://jsfiddle.net/3eFhf/

Answer 2

Написать так:

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

Answer 3

вы можете использовать функцию яваскрипта здесь.

< OnMouseOver = "document.getElementById ('MyID'). Style.display = 'блок'">

< ID = "MyID" класс = "dikha">

Ваш класс dikha должен быть скрыт по умолчанию

.dikha {дисплей: нет; }

вы также можете использовать JQuery slidetoggle метод для достижения этой