如何使三角形悬停在指定的元素上？ [复制]答案

【问题标题】：how to make triangle hover ithe specified element? [duplicate]如何使三角形悬停在指定的元素上？ [复制]
【发布时间】：2020-10-17 13:55:46
【问题描述】：

我有一个由两部分组成的导航栏。左侧是徽标图片。右侧栏由 4 个列表元素组成。我希望一个三角形出现在悬停元素的底部。我将列表浮动到右侧。现在我尝试了前后的伪类元素。但是三角形固定在任何悬停的元素上。我尝试更改所有参数，但随后整个条形都发生了变化。

<html>

<head>
<meta name="viewport"
    content="width=device-width, initial-scale=1">

<style>
    #navlist {
        background-color: black;
        position: absolute;
        width: 100%;
  padding-bottom: 0 px;
    }

    #navlist a {
        float:left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 10px;
        text-decoration: none;
        font-size: 15px;
  margin-bottom: 0px;
        outline: none;
    }

    .navlist-right a:hover:before {
    content: "";
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -15px;
    width: 0px;
    height 0px;
    xxmargin: 0px auto;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid black;

    }
.navlist-right  a:hover:after {
    content: "";
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -15px;
    width: 0px;
    height 0px;
    xxmargin: 0px auto;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid white;

 }

.navlist-right{
        width:20%;
        float:right;
        font-weight: bolder;
        padding-bottom: 0 px;
    }

#navlist a:hover {
        color : #f2f2f2;
    }

</style>

</head>

<body>

<!-- Navbar items -->
<div id="navlist">

    <ul>
        <li class="navlist-left">
    <a href="#">
    <span class="span-logo">
                <img src="/home/sahanaswamy/Downloads/logo.png" />
    </span>
    </a>
    </li>
    </ul>

<div class="navlist-right">

        <a href="#">Home</a>
        <a href="#">Work</a>
    <a href="#">Us</a>
    <a href="#">Contact</a>

</div>


</div>



 </body>

 </html>

我应该更改任何 before after 属性吗？如果我尝试更改悬停元素中的顶部和左侧属性，三角形将最终处于固定状态。

【问题讨论】：

标签： html css css-selectors pseudo-element

【解决方案1】：

你必须在a标签上使用position: relative。

#navlist {    display: flex;
    justify-content: space-between;
    align-items: center;
        background-color: black;
        position: absolute;
        width: 100%;
  padding-bottom: 0 px;
    }

    #navlist a {
        position: relative;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 10px;
        text-decoration: none;
        font-size: 15px;
  margin-bottom: 0px;
        outline: none;
    }

    .navlist-right a:hover:before {
    content: "";
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -15px;
    width: 0px;
    height 0px;
    xxmargin: 0px auto;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;

    }

.navlist-right{
display: inline-flex;
        font-weight: bolder;
        padding-bottom: 0 px;
    }

#navlist a:hover {
        color : #f2f2f2;
    }

<!-- Navbar items -->
<div id="navlist">

    <ul>
        <li class="navlist-left">
    <a href="#">
    <span class="span-logo">
                <img src="/home/sahanaswamy/Downloads/logo.png" />
    </span>
    </a>
    </li>
    </ul>

<div class="navlist-right">

        <a href="#">Home</a>
        <a href="#">Work</a>
    <a href="#">Us</a>
    <a href="#">Contact</a>

</div>


</div>

【讨论】：

【解决方案2】：

您忘记将position: relative 添加到a 元素。

#navlist a {
  position: relative;
  ...
}

由于您对:before 和:after 伪元素使用了position: absolute 属性，因此该元素将从页面流中移除，并将定位到最近的定位祖先。

更多详情：How to use CSS Position property

【讨论】：