Question

当我将鼠标悬停在菜单标题上时，我试图淡入菜单（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>

这是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。有人有解决方案吗？

'working'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

'working'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;    
}

Answer 1

试试这个......

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

Answer 2

试试这个。

         public void ExportToExcel()
    {
        Workbook book = new Workbook();
        Worksheet sheet = book.Worksheets.Add("Sample");
        WorksheetRow row = sheet.Table.Rows.Add();
        row.Cells.Add("Hello World");
        book.Save(@"c:\test.xls");
    }

此.menu_Title:hover > .menuitems{ transition-delay: 0.1s; opacity: 1; }将定位到下一个元素（>）。

Answer 3

你必须使用下一个兄弟选择器：

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

我测试了它并且它有效！

Answer 4

只需将你的CSS更改为

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

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

4 个答案: