如何让三角形悬停在指定元素上？

Question

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

<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>

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

Answer 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>

Answer 2

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

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

由于您使用 position: absolute 属性到 :before 和 :after pseudo-elements，带有的元素将从页面流中移除，并且将定位到最近定位的祖先。

更多详情：How to use CSS Position property

如何让三角形悬停在指定元素上？

how to make triangle hover ithe specified element?

html

css

css-selectors

pseudo-element