как отобразить блок DIV при наведении курсора мыши тег

Question

как открыть DIV тег при наведении курсора мыши тег

Service является идентификатором тега

Services является идентификатором сНа тега

Моего Html Кодекс

<ul><li><a href="#" id="Service">Services</a></li></ul> 

<div id="Services"> 
    <h1>Hello</h1> 
</div> 

и мой CSS код это

#Services 
    { 
     display: none; 
    } 

    #Service:hover + #Services 
    { 
     display: block; 
    } 

Answer 1

#Services не является родственным братом #Service, поэтому селектор + не подходит.

Проверьте это fiddle для модифицированной разметки, которая делает двух братьев и сестер. Вам нужно будет его соответствующим образом подстроить.

<ul><li><a href="#" id="Service">Services</a> 
    <div id="Services"> 
    <h1>Hello</h1> 
</div></li></ul> 

Answer 2

Добавьте #services как братьев и сестер элемент #service. Тогда код будет работать.

Такие, как это:

<div> 
    <a href="" id="service">Hyperlink</a> 
    <div id="services">Some text</div> 
</div> <!-- or any other of the container element -->