Html 将鼠标悬停在CSS中的文本淡入淡出菜单上

当鼠标停留在菜单标题上时，我试图淡入菜单（div）

以下是HTML：

<p class="menu_Title"> //menu </p>
<div class = "menuitems">
     <a href="#">Profile</a><br>
     <a href="#">Experiences</a><br>
     <a href="#">Skills</a><br> 
     <a href="#">Contact</a><br>  
</div>

我知道，如果我把整个东西放到一个div中，然后将其悬停在div上，它就可以工作了（下面是脚本），但这样做时会出现问题。我只希望当鼠标悬停在标题上而不是整个div上时，菜单才会出现。有人能解决这个问题吗

“工作”html：

<div class="h"> //ADDED THIS
    <p class="menu_Title"> //menu </p>
        <div class = "menuitems">
            <a href="#">Profile</a><br>
            <a href="#">Experiences</a><br>
            <a href="#">Skills</a><br> 
            <a href="#">Contact</a><br>  
        </div>
</div> //and this

试试这个

.menu_Title:hover .menuitems > a {
   transition-delay: 0.1s;
   opacity: 1;
}

试试这个

.menu_Title:hover > .menuitems{
    transition-delay: 0.1s;
    opacity: 1;
}

---

此

将指向下一个元素（

.menuitems

）。

您必须像这样使用下一个同级选择器：

.menu_Title:hover + .menuitems{
  transition-delay: 0.1s;
  opacity: 1;
}

---

我已经测试了它，它的工作

只需将css更改为

.menu_Title:hover+.menuitems{
    transition-delay: 0.1s;
    opacity: 1;
}

---

非常感谢，这很有效！！如果你不介意的话，我有一个理论问题。+和>，两者之间的区别是什么？

选择器表示父子关系，即当菜单项位于菜单标题元素内时。但是

+

表示下一个同级菜单项，即菜单项位于上一个菜单项的旁边（不在其内）时，这是有意义的。非常感谢。谢谢你的帮助。我需要使用“+”而不是“>”。谢谢您的帮助。我需要使用“+”而不是“>”，我只是忘记了。对不起。：）没问题！我也这么做了，哈哈哈，有个小提示，去掉

br

标签使用

display:block.menuitems中的code>是一条

规则。您的下一个问题将是当您尝试获取子导航项目时。

.menu_Title:hover + .menuitems{
  transition-delay: 0.1s;
  opacity: 1;
}

.menu_Title:hover+.menuitems{
    transition-delay: 0.1s;
    opacity: 1;
}