javascript - 悬停时 CSS 的背景形状

Question

我有一个 Bootstrap 导航，如下面的代码片段所示。

我注意到不同的用户只是进入标题而不是真正进入子菜单来选择产品。

当我展开产品部分并将鼠标悬停在标题上时，我希望橙色背景的形状像箭头一样，以向人们展示他们可以通过。像这样:

我尝试使用边框在纯 CSS 中摆弄形状，如此处所示 https://css-tricks.com/the-shapes-of-css/但无法实现我想要的。

.navbar .dropdown-menu{
  background-color:#eee;
}
.navbar .dropdown-submenu{
  display:none;
  background-color:#ddd;
  position:absolute;
  top:0px;
  left:100%;
}
.navbar .dropdown-submenu .dropdown-item > a{
  display:block;
}
.navbar .dropdown-menu > .dropdown-item > a{
  display:block;
}
.navbar .dropdown-item:hover .dropdown-submenu{
  display:block;
}
.navbar .dropdown-menu > .dropdown-item:focus, .navbar .dropdown-menu > .dropdown-item:hover {
  background-color:#F8981D;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <img src="media/icons/menu.png" alt="Lifting365 Menu" class="icon">
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item text-center dropdown">
        <a class="nav-link nav dropdown-toggle products-dropdown" href="#" data-toggle="dropdown" aria-expanded="true">Products</a>
        <ul class="dropdown-menu">
          <li class="dropdown-item d-block">
            <a class="submenu-item" href="store#1">Heading1›</a>
            <ul class="dropdown-submenu">
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
            </ul>
          </li>
          <li class="dropdown-item d-block">
            <a class="submenu-item" href="store#2">Heading2›</a>
            <ul class="dropdown-submenu">
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
            </ul>
          </li>
          <li class="dropdown-item d-block">
            <a class="submenu-item" href="store#3">Heading3›</a>
            <ul class="dropdown-submenu">
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li>
      <li class="nav-item text-center"><a class="nav-link nav" href="about">About</a></li>
      <li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact</a></li>
    </ul>
  </div>
</nav>

编辑

.navbar .dropdown-menu{
  background-color:#eee;
}
.navbar .dropdown-submenu{
  display:none;
  background-color:#ddd;
  position:absolute;
  top:0px;
  left:100%;
}
.navbar .dropdown-submenu .dropdown-item > a{
  display:block;
}
.navbar .dropdown-menu > .dropdown-item > a{
 display:block;
}
.navbar .dropdown-item:hover .dropdown-submenu{
  display:block;
}
.navbar .dropdown-menu > .dropdown-item:focus, .navbar .dropdown-menu > .dropdown-item:hover {
  background-color:orange;
}


.navbar .dropdown-menu > .dropdown-item{
  width: 200px;
  height: 40px;
  position: relative; 
  /* having this with relative positioning means my menu items are not aligned at the top the way they should be and I also don't want to give fixed widths or heights as the content is dynamic.*/
}
.navbar .dropdown-menu > .dropdown-item:hover:before{
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid orange;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  z-index:9999;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <img src="media/icons/menu.png" alt="Lifting365 Menu" class="icon">
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item text-center dropdown">
        <a class="nav-link nav dropdown-toggle products-dropdown" href="#" data-toggle="dropdown" aria-expanded="true">Products</a>
        <ul class="dropdown-menu">
          <li class="dropdown-item d-block">
            <a class="submenu-item" href="store#1">Heading1›</a>
            <ul class="dropdown-submenu">
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
            </ul>
          </li>
          <li class="dropdown-item d-block">
            <a class="submenu-item" href="store#2">Heading2›</a>
            <ul class="dropdown-submenu">
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
            </ul>
          </li>
          <li class="dropdown-item d-block">
            <a class="submenu-item" href="store#3">Heading3›</a>
            <ul class="dropdown-submenu">
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li>
      <li class="nav-item text-center"><a class="nav-link nav" href="about">About</a></li>
      <li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact</a></li>
    </ul>
  </div>
</nav>

Answer 1

这就是您要实现的目标吗？

.navbar .dropdown-menu{
  background-color:#eee;
  width: 100%;
}
.navbar .dropdown-submenu{
  display:none;
  background-color:#ddd;
  position:absolute;
  top:0px;
  left:100%;
}

.navbar .dropdown-menu > .dropdown-item:focus, .navbar .dropdown-menu{
  position: inherit;
}

.navbar .dropdown-menu > .dropdown-item:focus, .navbar .dropdown-menu > .dropdown-item{
    transition: .5s ease width;
    width: 95%;
}

.navbar .dropdown-submenu .dropdown-item > a{
  display:block;
}
.navbar .dropdown-menu > .dropdown-item > a{
  display:block;
}
.navbar .dropdown-item:hover .dropdown-submenu{
  display:block;
}
.navbar .dropdown-menu > .dropdown-item:focus, .navbar .dropdown-menu > .dropdown-item:hover {
  background-color:#F8981D;
  width: 100%;
}

.navbar .dropdown-menu > .dropdown-item:focus, .navbar .dropdown-menu > .dropdown-item:hover:after{
  content: "";
  position: relative;
  float: right;
  margin-top: -28px;
  left: 9%;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 13px solid #F8981D;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  z-index: 10;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <img src="media/icons/menu.png" alt="Lifting365 Menu" class="icon">
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item text-center dropdown">
        <a class="nav-link nav dropdown-toggle products-dropdown" href="#" data-toggle="dropdown" aria-expanded="true">Products</a>
        <ul class="dropdown-menu">
          <li class="dropdown-item d-block">
            <a class="submenu-item" href="store#1">Heading1›</a>
            <ul class="dropdown-submenu">
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
            </ul>
          </li>
          <li class="dropdown-item d-block">
            <a class="submenu-item" href="store#2">Heading2›</a>
            <ul class="dropdown-submenu">
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
            </ul>
          </li>
          <li class="dropdown-item d-block">
            <a class="submenu-item" href="store#3">Heading3›</a>
            <ul class="dropdown-submenu">
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
              <li class="dropdown-item d-block"><a href="#">Product</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li>
      <li class="nav-item text-center"><a class="nav-link nav" href="about">About</a></li>
      <li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact</a></li>
    </ul>
  </div>
</nav>

---

解释:

基本上形状是从您提供的链接中复制的。

然后添加 transition: 1s ease all; 到主要形状。在 :hover 上使元素宽度变大。

然后你得到这个:

.arrow{
  width: 200px;
  height: 40px;
  position: relative;
  background: orange;
  transition: 1s ease all;
  line-height: 40px;
  padding: 0 24px;
  margin-top: 5px;
}

.arrow a{
  text-decoration: none;
  color: black;
}

.arrow:before{
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid orange;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.arrow:hover{
  width: 250px;
}

.arrow:hover a{
  color: red;
  font-size: 120%;
}

<div class="arrow"><a href="#">Link 1</a></div>
<div class="arrow"><a href="#">Link 2</a></div>
<div class="arrow"><a href="#">Link 3</a></div>

---

您可以添加:

如果您希望箭头仅在悬停时出现，请将 .arrow:before{...} 更改为 .arrow:hover:before{...}

.arrow{
  width: 200px;
  height: 40px;
  position: relative;
  background: orange;
  transition: 1s ease all;
  line-height: 40px;
  padding: 0 24px;
  margin-top: 5px;
}

.arrow a{
  text-decoration: none;
  color: black;
}

.arrow:hover:before{
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid orange;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.arrow:hover{
  width: 250px;
}

.arrow:hover a{
  color: red;
  font-size: 120%;
}

<div class="arrow"><a href="#">Link 1</a></div>
<div class="arrow"><a href="#">Link 2</a></div>
<div class="arrow"><a href="#">Link 3</a></div>

---

或添加:

如果您希望橙色背景也出现在悬停时。添加

.arrow:hover{
    background: orange;
}

并从 .arrow{...} 中删除 background: orange;。同时将 transition: 1s ease all; 更改为 transition: 1s ease width;

.arrow{
  width: 200px;
  height: 40px;
  position: relative;
  transition: 1s ease width;
  line-height: 40px;
  padding: 0 24px;
  margin-top: 5px;
}

.arrow:hover{
  background: orange;
}

.arrow a{
  text-decoration: none;
  color: black;
}

.arrow:hover:before{
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid orange;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.arrow:hover{
  width: 250px;
}

.arrow:hover a{
  color: red;
  font-size: 120%;
}

<div class="arrow"><a href="#">Link 1</a></div>
<div class="arrow"><a href="#">Link 2</a></div>
<div class="arrow"><a href="#">Link 3</a></div>