Question

我已经使用scss和bootstrap创建了一个下拉样式菜单。我已经能够按照一个问题设置所有要求。

将鼠标悬停在下拉菜单上方的箭头上时，它会高亮显示箭头，我不希望这种情况发生。仅当第一个菜单项悬停时，箭头才突出显示。

我该如何解决？参见codepen链接： https://codepen.io/duodice/pen/NJJXYJ

（图像不加载，因为它们是本地文件，所以很好）

要复制该问题： 1.将鼠标悬停在导航栏上的“服务”上 2.将鼠标悬停在下拉菜单顶部的小三角形上

scss：

$pop-up-menu-bg-clr : white;
$pop-up-menu-shade-clr : #B0c1d3;
$pop-up-menu-font-clr : #1b2b43;


.pop-up-menu-container {
  position: relative;

  li:hover {
    .pop-up-menu-list {
      display: block;
    }

  }
}

.pop-up-menu-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding-top: 1.5rem;
  background-color: transparent;
  z-index: 999;


  li a {
    transition: none !important;
    display: block;
    color: $pop-up-menu-font-clr;
    text-align: left;
    background-color: $pop-up-menu-bg-clr;
    width: 100%;
    padding: 1rem;

    &:hover {
      background-color: $pop-up-menu-shade-clr;
      color: white;
    }

    img {
      height: 80%;
    }

    p {
      color: $pop-up-menu-font-clr;
      font-size: 13px;
      margin-bottom: 0;
    }
  }

  li:first-child {
    position: relative;
    z-index: 998;

    &:hover {
      border-bottom-color: y
    }

    a {
      border-radius: 15px 15px 0 0;
    }

    &:before {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      border: 1rem solid transparent;
      border-bottom-color: $pop-up-menu-bg-clr;
      top: 0;
      left: 30%;
      margin-top: calc(-2rem + 1px);
    }

    &:hover:before {
      border-bottom-color: $pop-up-menu-shade-clr;
    }

  }

  li:last-child a {
    border-radius: 0 0 15px 15px;
  }

}

HTML：

<!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" id="sidebarCollapse" data-toggle="collapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end">
                <ul class="navbar-nav pop-up-menu-container">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Services</a>
                        <ul class="pop-up-menu-list list-unstyled">
                            <li>
                                <a href="#">
                                    <div class="row">
                                        <div class="col-2 mr-2">
                                            <img src="wwwroot/images/icons/settings.svg">
                                        </div>
                                        <div class="col">
                                            All Services
                                            <p>Learn more about our services</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="row">
                                        <div class="col-2 mr-2">
                                            <img src="wwwroot/images/icons/web_development_devices.svg">
                                        </div>
                                        <div class="col">
                                            Web Development
                                            <p>Design & Development</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="row">
                                        <div class="col-2 mr-2">
                                            <img src="wwwroot/images/icons/hosting_cloud.svg">
                                        </div>
                                        <div class="col">
                                            Hosting & Maintenance
                                            <p>Store your site online</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="row">
                                        <div class="col-2 mr-2">
                                            <img src="wwwroot/images/icons/marketing_growth.svg">
                                        </div>
                                        <div class="col">
                                            Digital Marketing
                                            <p>Get more visitors today</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Disabled</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

谢谢。

Answer 1

您将第一个没有hover的孩子的li设置为a（因为您设置为li的其余部分）：

将其更改为li a:hover：

See working code

li:first-child {
    position: relative;
    z-index: 998;

    a:hover {
      border-bottom-color: y
    }

    a {
      border-radius: 15px 15px 0 0;
    }

    a:before {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      border: 1rem solid transparent;
      border-bottom-color: $pop-up-menu-bg-clr;
      top: 0;
      left: 30%;
      margin-top: calc(-2rem + 1px);
    }

    a:hover:before {
      border-bottom-color: $pop-up-menu-shade-clr;
    }

  }

如何从:: before标签

1 个答案: