Question

我正在使用CSS设计侧边栏菜单样式。此菜单使用嵌套的<li>和#menu-sidebar-main>li:hover>a元素。问题是当子菜单项悬停时，它们的父元素也会激活。

根据我的理解，像<li><a>这样的样式会阻止效果比顶级<ul>中标识为#menu-sidebar-main的第一个<li>元素更进一步级联。是否有类似的技巧可以防止较低级/* SIDEBAR MENU */ /* top level */ #menu-sidebar-main { padding: 0px; list-style-type: none; text-transform: uppercase; } #menu-sidebar-main li { background-color: #797979; } #menu-sidebar-main li a { padding-left: 10px; color: #000000; text-decoration: none; } #menu-sidebar-main>li:hover, #menu-sidebar-main>li:hover>a { background-color: #791416; color: #ffffff; } /* mid level */ #menu-sidebar-main li ul { padding: 0px; list-style-type: none; } #menu-sidebar-main li ul li { background-color: #b3b2b2; } #menu-sidebar-main li ul li a { padding-left: 10px; color: #000000; text-decoration: none; } #menu-sidebar-main>li>ul.sub-menu>li:hover, #menu-sidebar-main>li>ul.sub-menu>li:hover>a { background-color: #791416; color: #ffffff; } /* bottom level */ #menu-sidebar-main li ul li ul { padding: 0px; list-style-type: none; } #menu-sidebar-main li ul li ul li { background-color: #edebeb; } #menu-sidebar-main li ul li ul li a { padding-left: 20px; color: #000000; text-decoration: none; } #menu-sidebar-main>li>ul.sub-menu>li>ul.sub-menu>li:hover, #menu-sidebar-main>li>ul.sub-menu>li>ul.sub-menu>li:hover>a { background-color: #791416; color: #ffffff; } /* current page */ li.current_page_item { background-color: #791416 !important; } li.current_page_item a { color: #ffffff; }元素向上级联到其上方的元素？

在下面的示例中，您可以看到当您将鼠标悬停在MID LEVEL元素上时，其父TOP LEVEL元素也会突出显示，当您将鼠标悬停在BOTTOM LEVEL元素上时，其父MID LEVEL和TOP LEVEL元素都会突出显示

JS小提琴：https://jsfiddle.net/Typeless/gmsmj22t/

下面的代码片段：

<!DOCTYPE html>
<html lang="en-us">

  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>

  <body>
    <ul id="menu-sidebar-main" class="menu">
      <li id="menu-item-268" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-71 current_page_item menu-item-has-children menu-item-268"><a href="#">Top Level Active Page</a>
        <ul class="sub-menu">
          <li id="menu-item-269" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-269"><a href="#">Mid Level</a></li>
          <li id="menu-item-270" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-270"><a href="#">Mid Level</a></li>
          <li id="menu-item-271" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-271"><a href="#">Mid Level</a></li>
          <li id="menu-item-272" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-272"><a href="#">Mid Level</a>
            <ul class="sub-menu">
              <li id="menu-item-273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-273"><a href="#">Bottom Level</a></li>
              <li id="menu-item-274" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-274"><a href="#">Bottom Level</a></li>
              <li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275"><a href="#">Bottom Level</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>

</html>

pip install BeautifulSoup4

Answer 1

您应该将更改应用于悬停的a元素，而不是应用于包含子菜单的悬停的li元素：

/* SIDEBAR MENU */

/* top level */

#menu-sidebar-main {
  padding: 0px;
  list-style-type: none;
  font-family: "Fjalla One";
  text-transform: uppercase;
}

#menu-sidebar-main li {
  background-color: #797979;
}

#menu-sidebar-main li a {
  padding-left: 10px;
  color: #000000;
  /* this should be #ffffff but temporarily #000000 to make sure hover on lower items isn't affecting this one */
  text-decoration: none;
  display: block;
}


#menu-sidebar-main>li:hover>a {
  background-color: #791416;
  color: #ffffff;
}

/* mid level */

#menu-sidebar-main li ul {
  padding: 0px;
  list-style-type: none;
}

#menu-sidebar-main li ul li {
  background-color: #b3b2b2;
}

#menu-sidebar-main li ul li a {
  padding-left: 10px;
  color: #000000;
  text-decoration: none;
}


#menu-sidebar-main>li>ul.sub-menu>li>a:hover {
  background-color: #791416;
  color: #ffffff;
}

/* bottom level */

#menu-sidebar-main li ul li ul {
  padding: 0px;
  list-style-type: none;
}

#menu-sidebar-main li ul li ul li {
  background-color: #edebeb;
}

#menu-sidebar-main li ul li ul li a {
  padding-left: 20px;
  color: #000000;
  text-decoration: none;
}


#menu-sidebar-main>li>ul.sub-menu>li>ul.sub-menu>li>a:hover {
  background-color: #791416;
  color: #ffffff;
}

/* current page */

li.current_page_item {
  background-color: #791416 !important;
}

li.current_page_item a {
  color: #ffffff;
}

更新将display: block添加到a个元素，以达到要求的效果。

如何设置li样式：悬停而不影响其父元素

1 个答案: