使图像在悬停时显示在导航栏 link 旁边

Question

我有这 3 个三角形，每个三角形都在导航栏旁边 link。我希望能够将鼠标悬停在导航栏 link 上并使三角形出现在它旁边。到目前为止，我无法让它出现，我也不知道为什么。我是 scss 的新手，所以也许这就是我不明白的原因。我必须使用 visibility: hidden 因为如果我使用 display none，它会带走必要的边距。

 <!--desktop nav-->
        <nav class="navbar-desktop">
            <div class="container">
                <div class="navbar-menu">

                    <div class="nav-items">
                        <img src="./img/neon-pink.png" class="about-bullet">
                        <a id="about-hover" href="about.html">About</a>
                    </div>
                    <div class="nav-items">
                        <img src="./img/neon-pink.png" class="work-bullet">
                        <a id="work-hover" href="work.html">Work</a>
                    </div>
                    <div class="nav-items">
                        <img src="./img/neon-pink.png" class="contact-bullet">
                        <a id="contact-hover" href="#">Contact</a>
                    </div>

                    <!--social-->
                    <div class="social-container">
                        <a target="_blank" href="https://github.com/"><i
                                class="fa-brands fa-github-square"></i></a>
                        <a target="_blank" href="https://www.linkedin.com/"><i
                                class="fa-brands fa-linkedin"></i></a>
                    </div>
                </div>
            </div>
        </nav>


    a {
      font-family: $ff-secondary;
      text-decoration: none;
      color: white;
    }
    
    #header {
      .navbar-desktop {
        .container {
          justify-content: end;
          .navbar-menu {
            display: flex;
            justify-content: flex-end;
            padding-top: 16px;
            font-size: 1.75rem;
    
            .nav-items {
              display: flex;
              align-items: center;
              .about-bullet,
              .work-bullet,
              .contact-bullet {
                width: 24px;
                height: 24px;
                margin-right: 8px;
                transform: rotate(180deg);
                visibility: hidden;
              }
              a {
                margin-left: 0;
                margin-right: 64px;
                text-shadow: 0 0 20px #fff;
              }
            }
            #about-hover:hover .about-bullet {
              visibility: visible;
            }
            .social-container {
              margin-right: 16px;
              display: flex;
              a {
                margin: 0 8px;
              }
              i {
                font-size: 2.15rem;
              }
            }
          }
        }
      }
    }

Answer 1

你的意思是这样的？

    i {
        font-size: 2.15rem;
    }

    a {
        text-decoration: none;
        color: white;
        text-shadow: 0 0 20px #fff;
        background: rgb(189, 184, 184);
    }

    .container {
        justify-content: end;
    }

    .nav-items {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .nav-items:hover .arrow {
        visibility: visible;
    }

    .arrow {
        visibility: hidden;
        transform: rotate(90deg);
        width: 24px;
        height: 24px;
    }

    .navbar-menu {
        display: flex;
        justify-content: flex-end;
        padding-top: 16px;
        font-size: 1.75rem;
        gap: 10px;
    }

    .social-container {
        margin-right: 16px;
        display: flex;
    }

<nav class="navbar-desktop">
    <div class="container">
        <div class="navbar-menu">
            <div class="nav-items">
                <img src="https://svgsilh.com/svg/146916.svg" class="arrow about-bullet" />
                <a id="about-hover" href="about.html">About</a>
            </div>
            <div class="nav-items">
                <img src="https://svgsilh.com/svg/146916.svg" class="arrow work-bullet" />
                <a id="work-hover" href="work.html">Work</a>
            </div>
            <div class="nav-items">
                <img src="https://svgsilh.com/svg/146916.svg" class="arrow contact-bullet" />
                <a id="contact-hover" href="#">Contact</a>
            </div>

            <!--social-->
            <div class="social-container">
                <a target="_blank" href="https://github.com/"><i class="fa-brands fa-github-square"></i></a>
                <a target="_blank" href="https://www.linkedin.com/"><i class="fa-brands fa-linkedin"></i></a>
            </div>
        </div>
    </div>
</nav>

Answer 2

IMG-tag 不是 #about-hover 的子项，因此悬停在它上面没有任何效果。

鼠标悬停需要在 nav-items 上。

a {
  font-family: $ff-secondary;
  text-decoration: none;
  color: #fff;
}

#header {
  .navbar-desktop {
    .container {
      justify-content: end;
      .navbar-menu {
        display: flex;
        justify-content: flex-end;
        padding-top: 16px;
        font-size: 1.75rem;

        .nav-items {
          display: flex;
          align-items: center;
          .about-bullet,
          .work-bullet,
          .contact-bullet {
            width: 24px;
            height: 24px;
            margin-right: 8px;
            transform: rotate(180deg);
            visibility: hidden;
          }
          a {
            margin-left: 0;
            margin-right: 64px;
            text-shadow: 0 0 20px #fff;
          }
          &:hover {
            .about-bullet,
            .work-bullet,
            .contact-bullet {
              visibility: visible;
            }
          }
        }
        .social-container {
          margin-right: 16px;
          display: flex;
          a {
            margin: 0 8px;
          }
          i {
            font-size: 2.15rem;
          }
        }
      }
    }
  }
}

使图像在悬停时显示在导航栏 link 旁边

Make img appear next to navbar link on hover

css

image

hover

visibility

hidden