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

问题描述 投票：-1回答：1

我正在使用CSS设计侧边栏菜单。此菜单使用嵌套的<ul>和<li>元素。问题是当子菜单项悬停时，它们的父元素也会激活。

根据我的理解，像这样的#menu-sidebar-main>li:hover>a样式可以防止效果比顶级<li><a>中的第一个<ul>元素更多级联，标识为#menu-sidebar-main。有没有类似的技巧来阻止较低级别的<li>元素向上级联到它上面的元素？

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

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

下面的代码片段：

/* 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;
}
<!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>
css
1个回答
0
投票

您应该将更改应用于悬停的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元素以实现请求的效果。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.