将文字悬停在CSS中的淡入淡出菜单中

问题描述：

我想淡入菜单（div），只需将鼠标悬停在菜单标题上即可。将文字悬停在CSS中的淡入淡出菜单中

下面是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>

这里是CSS：

.menuitems a { 
    text-decoration: none; 
} 

.menuitems { 
    opacity: 0; 
    transition: opacity .25s ease-in; 
} 

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

我知道，如果我把整个事情变成一个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

'工作' 的CSS：

.menu_Title:hover { 
    letter-spacing: 3px; 
} 

.menuitems a { 
    text-decoration: none; 
} 

.menuitems{ 
    opacity: 0; 
    transition: opacity .25s ease-in;  
} 

.h:hover .menuitems{ //THIS IS THE ONLY LINE THAT CHANGES 
    transition-delay: 0.1s; 
    opacity: 1;  
}

有一个小窍门，摆脱了'br'标签的使用'显示：块;'在'.menuitems了'规则。 https://jsfiddle.net/uze3yoyu/。当您尝试访问子导航项时，您的下一个问题将会出现。 –

答

，你必须使用一个同级选择这样的：

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

我已经测试了它和它的作品！

非常感谢，这工程！如果你不介意，我有一个理论问题。 +和>有什么区别？ – user3015519

''''选择器意味着父子关系，即当菜单项在menu_Title元素内部时。但“+”表示下一个兄弟，即菜单项位于前一个menu_Title项目旁边（不在里面） –

好吧，这很有道理。谢谢！ – user3015519

答

试试这个....

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

我试过了。这是行不通的。 – user3015519

我更新了我的答案。再试一次。 –

谢谢你的帮助。而不是'>'，我需要使用'+'。 – user3015519

答

试试这个。

>这将针对下一个元素（.menuitems）。

谢谢你的帮助。而不是'>'，我需要使用'+'。 – user3015519

我只是忘了它。抱歉。 :) – Hezron

没问题！我也太哈哈 – user3015519

答

只是改变你的CSS来

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

将文字悬停在CSS中的淡入淡出菜单中

相关推荐