如何在悬停标签时显示块div

Question

如何在悬停标签时打开div标签

服务是标签的ID

服务是div标签的id

我的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 -->