html - 触发器和内容之间没有边框的悬停菜单下拉菜单

Question

我尝试制作一个具有以下要求的可悬停菜单:

• 如果将鼠标悬停在列表中的某个元素上，内容部分将显示在右侧。
• 如果将鼠标悬停在列表中的某个元素上，则该元素的边框颜色和内容会发生更改。元素和内容之间的边界将被隐藏。

示例在这里:

我的代码可以在这里找到: https://codesandbox.io/s/jvk8zzqvz9

问题是当我放大浏览器时会显示一些丑陋的伪像。也许我的方法是错误的，有更好的方法来做到这一点。以下是我所说的文物:

我的代码在这里:

HTML:

<ul class="menu">
                <li class="menu-item has-dropdown">
                    <div class="dropdown-trigger">
                        <div class="menu-content">
                            <a href="">Hover me!</a>
                        </div>
                    </div>
                    <div class="dropdown-content">
                        <div>Zde je nějaký obsah.</div>
                        <div>Zde taktéž</div>
                        <div>Hola hola.</div>
                    </div>
                </li>
                <li class="menu-item has-dropdown">
                    <div class="dropdown-trigger">
                        <div class="menu-content">
                            <a href="">Hover me!</a>
                        </div>
                    </div>
                    <div class="dropdown-content">
                        Zde je obsah dropdownu.
                    </div>
                </li>
                <li class="menu-item has-dropdown">
                    <div class="dropdown-trigger">
                        <div class="menu-content">
                            <a href="">Hover me!</a>
                        </div>
                    </div>
                    <div class="dropdown-content">
                        <div>Zde je nějaký obsah.</div>
                        <div>Zde taktéž</div>
                        <div>Hola hola.</div>
                    </div>
                </li>
            </ul>

SCSS:

.menu {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 200px;

    .menu-content {
        padding: 1rem;
    }

    .menu-item {
        &.has-dropdown {
            position: relative;

            &:hover {
                .dropdown-content {
                    transition-delay: 0.25s;
                    visibility: visible;
                    opacity: 1;
                }
                .dropdown-trigger {
                    transition-delay: 0.25s;
                    border: 1px solid green;

                    &::after {
                        transition-delay: 0.25s;
                        visibility: visible;
                        opacity: 1;
                    }
                }
            }
        }

        &:not(:last-child) > .dropdown-trigger {
            border-bottom: none;
        }

        .dropdown-trigger {
            position: relative;
            border: 1px solid red;
            &::after {
                content: '';
                transition: all 0s linear;
                visibility: hidden;
                opacity: 0;
                position: absolute;
                top: 0;
                left: 100%;
                height: 100%;
                width: 1px + 2px;
                background-color: white;
                margin-left: -1px;
                z-index: 20;
            }
        }

        .dropdown-content {
            transition: all 0s linear;
            visibility: hidden;
            opacity: 0;
            border: 1px solid green;
            margin-left: -1px;
            position: absolute;
            top: 0;
            right: auto;
            left: 100%;
            min-width: 25rem;
            padding: 1rem;
            z-index: 19;
        }
    }
}

你能帮助我如何在不出现伪影的情况下实现结果吗？

Answer 1

我将使用边框并将元素的右侧元素设置为白色并具有更高的 z-index 以覆盖下拉列表中不需要的元素，而不是使用伪元素的 hack 。我还将添加另一条规则以隐藏到下一个元素的顶部边框。

您会注意到使用渐变来模拟白色右边框。我用它来避免使用右边框缩放时会看到的不良效果。

body {
  font-family: sans-serif;
}

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 200px;
}
.menu .menu-content {
  padding: 1rem;
}
.menu .menu-item.has-dropdown {
  position: relative;
}
.menu .menu-item.has-dropdown:hover .dropdown-content {
  visibility: visible;
  opacity: 1;
  transition:0s opacity 0.8s;
}
.menu .menu-item.has-dropdown:hover .dropdown-trigger {
  border-color: green;
  /**/
  border-right-width:0;
  /* try border-right-color:#fff and you will have the same effect
     but a small glitch when zooming
  */  
  background-size:1px 100%;
  transition:0s all 0.8s;
    
  position:relative;
  z-index:20;
}
.menu .menu-item.has-dropdown:hover + * .dropdown-trigger {
  border-top-color:green;
  transition:0s border-top-color 0.8s;
}

.menu .menu-item:not(:last-child) > .dropdown-trigger {
  border-bottom: none;
}
.menu .menu-item .dropdown-trigger {
  position: relative;
  border: 1px solid red;
  background:linear-gradient(#fff,#fff) right/0px 100% no-repeat;
}

.menu .menu-item .dropdown-content {
  transition: all 0s linear;
  visibility: hidden;
  opacity: 0;
  border: 1px solid green;
  margin-left: -1px;
  position: absolute;
  top: 0;
  right: auto;
  left: 100%;
  min-width: 25rem;
  padding: 1rem;
  z-index: 19;
}

<div>
  <ul class="menu">
    <li class="menu-item has-dropdown">
      <div class="dropdown-trigger">
        <div class="menu-content"><a href="">Hover me!</a></div>
      </div>
      <div class="dropdown-content">
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
      </div>
    </li>
    <li class="menu-item has-dropdown">
      <div class="dropdown-trigger">
        <div class="menu-content"><a href="">Hover me!</a></div>
      </div>
      <div class="dropdown-content">Zde je obsah dropdownu.</div>
    </li>
    <li class="menu-item has-dropdown">
      <div class="dropdown-trigger">
        <div class="menu-content"><a href="">Hover me!</a></div>
      </div>
      <div class="dropdown-content">
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
      </div>
    </li>
  </ul>
</div>