Question

我正在尝试使用类似手风琴的菜单我在这里找到了一个不错的https://www.script-tutorials.com/css3-onclick-vertical-metal-menu，现在我正在努力做出调整其意思是通过 CSS悬停来更改子菜单选项的颜色但问题是：我无法找到一种方法来使用不同的颜色来处理悬停，在子菜单中... ... 看看这些css行：

#Top_Menu li a.SubMenu_1            {background:red         url("Down_Arrow.png") no-repeat;}
#Top_Menu li a.SubMenu_2            {background:lime        url("Down_Arrow.png") no-repeat;}
#Top_Menu li a.SubMenu_3            {background:yellow      url("Down_Arrow.png") no-repeat;}
#Top_Menu li a.SubMenu_4            {background:lightgray   url("Down_Arrow.png") no-repeat;}

#Top_Menu a.SubMenu_1:focus         {background:mediumvioletred;}
#Top_Menu a.SubMenu_2:focus         {background:limegreen;}
#Top_Menu a.SubMenu_3:focus         {background:orange;}
#Top_Menu a.SubMenu_4:focus         {background:gray;}

#Top_Menu a.SubMenu_1:active        {background:mediumvioletred;}
#Top_Menu a.SubMenu_2:active        {background:limegreen;}
#Top_Menu a.SubMenu_3:active        {background:orange;}
#Top_Menu a.SubMenu_4:active        {background:gray;}

#Top_Menu li a.SubMenu_1:hover      {background-color:mediumvioletred;}
#Top_Menu li a.SubMenu_2:hover      {background-color:limegreen;}
#Top_Menu li a.SubMenu_3:hover      {background-color:orange;}
#Top_Menu li a.SubMenu_4:hover      {background-color:gray;}

#Top_Menu ul li a.SubMenu_1:hover   {background-color:red;     color:black;}
#Top_Menu ul li a.SubMenu_2:hover   {background-color:lime;    color:black;}
#Top_Menu ul li a.SubMenu_3:hover   {background-color:yellow;  color:black;}
#Top_Menu ul li a:hover             {background-color:magenta; color:black;}

所有代码：https://jsfiddle.net/rbon/t3nefas3/1/
子菜单有红色，石灰色，黄色和浅灰色。在用户操作（单击或悬停）时，它们变为中等颜色，柠檬绿，橙色和灰色一切似乎都没问题......但是最后4行不能按预期完成工作（好吧，我想象的方式）。
我希望子菜单选项可以转换为原始子菜单颜色（红色，石灰色，黄色，浅灰色），但它们都变为洋红色（我使用洋红色只是为了让它更清晰）。
最后一行背后的秘密是什么???

#Top_Menu ul li a:hover             {background-color:magenta; color:black;}

我希望这样的事情可以起作用：

#Top_Menu ul li a.SubMenu_4:hover   {background-color:lightgray;` color:black;}

发生了什么事？前3个子菜单包含SubMenu_1到3的类，它们的工作除了最后一个指令序列（当涉及'#Top_Menu ul li a.CLASS_NAME：hover'）。
最后一个......我不能使用SubMenu_4类名，因为它只是显示没有颜色......

一个小问题：外部div（类菜单）未与其强制性坐标（顶部= 0px）对齐。为什么呢？

Answer 1

你的选择器不对;您正在选择一个不存在的类的链接。

尝试：

#Top_Menu li a.SubMenu_1 ~ ul li a:hover {
  background-color: red;
  color: black;
}

#Top_Menu li a.SubMenu_2 ~ ul li a:hover {
  background-color: lime;
  color: black;
}

#Top_Menu li a.SubMenu_3 ~ ul li a:hover {
  background-color: yellow;
  color: black;
}

#Top_Menu li a ~ ul li a:hover {
  background-color: magenta;
  color: black;
}

https://jsfiddle.net/t3nefas3/2/

或者将缺少的类添加到每个子级链接中。

CSS Hover不接受类名

1 个答案: