将鼠标悬停在子菜单上后，为父菜单项设置不同的颜色

Question

我有一个子菜单菜单，只使用css和html。

我试图让主菜单在鼠标悬停时获得一些颜色..

当鼠标超过子菜单时保持此更改..

我现在所能做的就是设置相同的颜色os子菜单..

这是我正在尝试做的事情：

我的代码：

HTML：

set the defaultStack to "myMainStack"
if field "EE" is empty then...

CSS：

<ul id="nav">

   <li><a href="#">Home</a></li>

   <li>
      <a href="#">Institucional</a>
      <ul>
         <li><a href="#">Nonononono</a></li>
         <li><a href="#">Nonononono</a></li></li>
         <li><a href="#">Nonononono</a></li>
      </ul>
   </li>
</ul>

Answer 1

只需将:hover效果应用于完整的li元素

＆＃13;

＆＃13;

#nav > li:hover {
  background-color: #D93600;
  color: yellow;
}
#nav > li:hover a {
  color: yellow;
}
/* rest of code */

#nav {
  list-style: none;
  font-weight: bold;
  float: right;
  width: 100%;
  font-size: 13px;
}
#nav li {
  float: left;
  margin-right: 10px;
  position: relative;
  text-align: left;
}
#nav a {
  display: block;
  padding: 5px;
  color: #666;
  text-decoration: none;
  //background:white;

}
#nav a:hover {
  color: yellow;
  text-decoration: none;
  background: #D93600;
}
#nav ul {
  //border:1px solid black;
  border-top: 0;
  border-right: 0;
  background: #D93600;
  list-style: none;
  position: absolute;
  left: -9999px;
  -webkit-box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.75);
}
#nav ul li {
  padding-top: 1px;
  /* Introducing a padding between the li and the a give the illusion spaced items */
  float: none;
  border-bottom: 1px solid #FF7040;
  margin-right: 0px;
}
#nav ul a {
  white-space: nowrap;
  /* Stop text wrapping and creating multi-line dropdown items */
  text-decoration: none;
}
#nav li:hover ul {
  /* Display the dropdown on hover */
  left: 0;
  /* Bring back on-screen when needed */
}
#nav li:hover a {
  /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
  //background:#D93600;
  text-decoration: none;
}
#nav li:hover ul a {
  /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
  text-decoration: none;
  color: white;
  font-weight: normal;
  font-size: 12px;
}
#nav li:hover ul li a:hover {
  /* Here we define the most explicit hover states--what happens when you hover each individual link. */
  background: #FFBE13;
  text-decoration: none;
  color: black;
}

＆＃13;

<ul id="nav">

  <li><a href="#">Home</a>
  </li>

  <li>
    <a href="#">Institucional</a>
    <ul>
      <li><a href="#">Sobre o CCOCF</a>
      </li>
      <li><a href="#">Assosiação de Amigos do CCOCF</a>
      </li>
  </li>
  <li><a href="#">Projetos da Casa</a>
  </li>
  </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个非常简单的

 <ul id="nav">
   <li class="primary"><a href="#">Home</a></li>
   <li class="primary">
      <a href="#">Institucional</a>
      <ul>
         <li><a href="#">Nonononono</a></li>
         <li><a href="#">Nonononono</a></li>
         <li><a href="#">Nonononono</a></li>
      </ul>
   </li>
</ul>

    #nav .primary:hover a {
    color: #FFBE13;
    background: #D93600;
   }

只需将上面的类添加到li和两行css

Answer 3

要在悬停时突出显示“父级”菜单，您应该编写以下CSS规则。

#nav li:hover {
  background:#f00;
}

要将父菜单文本设为白色，您应该编写以下代码

#menu li:hover a {
  color:#ffff;
}

如果你想检查上面的代码，请检查这个小提琴：https://jsfiddle.net/g5jL7xs1/

Answer 4

如果父项有效，请尝试使用此proposal设置的颜色。

#define SPS 125
#define TIME 2.5

char Samples[ (int)(SPS * TIME) ];