为什么我的工具提示没有出现在 link 悬停时？

Question

几天来我一直在尝试让我的工具提示显示出来，但没有任何进展。当不透明度为 1 时，它们可以使用此块 select 或 .sidebar ul li .tooltip {} 出现在边栏中，如果您想查看它们的外观。

我尝试将 z-index 添加到 .sidebar ul li a:hover .tooltip {} select 或者与 opacity:1 一起，但这不起作用。

我还尝试更改 'hover' 以应用于 'li' 而不是 'a' 标签，但这并没有改变任何东西。并尝试将其添加到两者 (.sidebar ul li:hover a:hover .tooltip {}) 但也不起作用。

这是不透明度的问题，还是 selector 的问题？我觉得我什么都试过了。

当我 select 浏览器开发工具中的工具提示元素并强制进入悬停状态时，您可以看到工具提示在正确的位置，但就在所有内容的后面或不可见。

如有任何帮助，我们将不胜感激。

.sidebar ul li a:hover {
  background-color: #ae85f1;
}

.sidebar ul li a:hover .tooltip {
  transition: all 0.5s ease;
  top: 50%;
  opacity: 1;
  display: block;
  z-index:500;
}

.sidebar ul li .tooltip {
  position: absolute;
  color: #343434;
  left: 130px;
  top: 0;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  height: 35px;
  width: 122px;
  background: #fff;
  line-height: 35px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: 0s;
  pointer-events: none;
  opacity: 1;
}

.sidebar.active ul li .tooltip {
  display: none;
}

https://jsfiddle.net/ramid320/ho148uyx/11/

Answer 1

CSS 中几乎没有问题，您需要更新代码中的以下更改。

变化一：

从第 32

行的 ul CSS 中删除 overflow: hidden;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

变化2：

在第 123

行 sidebar ul li a .tooltip CSS 添加 display: none;

.sidebar ul li a .tooltip {
  position: absolute;
  color: #343434;
  display: none;
  left: 130px;
  top: 0;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  height: 35px;
  width: 122px;
  background: #fff;
  line-height: 35px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: 0s;
  pointer-events: none;
}

变化3：

在第 141

行 sidebar.active ul li .tooltip CSS 添加 !important

.sidebar.active ul li .tooltip {
  display: none !important;
}

下面的代码片段也更新了所有更改，希望对您有所帮助。谢谢

let btn = document.querySelector("#btn");
let sidebar = document.querySelector(".sidebar");

btn.onclick= function(){
    sidebar.classList.toggle("active");
}

@import url('https://fonts.googleapis.com/css2?family=Cabin&family=Poppins:wght@300;400;500;600;700&display=swap');
/*font-family: 'Poppins', sans-serif;
//font-family: 'Cabin', sans-serif;*/

--root {
  --dark1: #1c1c1c;
  --dark2: #daddd8;
  --dark3: #ecebe4;
  --dark4: #eef0f2;
  --dark5: #fafaff;
  --og1: #eee2ff;
  --og2: #faeaff;
  --og3: rgba(228, 53, 145, 0.7);
  --og4: #ffd5d5;
  
}

*{
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
          
body {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
  width: 25%;
}

li a {
  display: block;
  text-align: center;
  padding: 8px 0px;
  text-decoration: none;
  color: #e4d9ff;
}

/*--------------------------------------------------------------sidebar styles */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 78px;
  background: #1c1c1c;
  color: #e4d9ff;
  padding: 6px 14px;
  transition: all 0.5s ease;
  z-index: 10;
}

.sidebar.active {
  width: 240px;
}

.sidebar .logo_details .logo {
  height: 50px;
  width: 60%;
  display: flex;
  align-items: center;
  color: #fafaff;
  opacity: 0;
  pointer-events: none;
}

.sidebar.active .logo_details .logo {
  opacity: 1;
  pointer-events: none;
}

.logo_details .logo_name {
  font-size: 18px;
  color: #e4d9ff;
  font-weight: 400;
}
          
.sidebar #btn {
  color: #fff;
  position: absolute;
  left: 50%;
  top: 6px;
  font-size: 18px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  transform: translateX(-50%);
}

.sidebar.active #btn {
  left: 85%;
}
          
.sidebar ul{
  margin-top: 20px;
}
          
.sidebar ul li{
  position: relative;
  list-style: none;
  height: 56px;
  width: 100%;
  line-height: 30px;
}

.sidebar ul li a .tooltip {
  position: absolute;
  color: #343434;
  display: none;
  left: 130px;
  top: 0;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  height: 35px;
  width: 122px;
  background: #fff;
  line-height: 35px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: 0s;
  pointer-events: none;
}

.sidebar.active ul li .tooltip {
  display: none !important;
}
        
.sidebar ul li a {
  color: #fff;
  display: flex;
  align-items: center;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.4s ease;
  white-space: nowrap;
}

.sidebar ul li i{
  height: 40px;
  min-width: 50px;
  border-radius: 12px;
  line-height: 40px;
  text-align: center;
}

.sidebar ul li a:hover {
  background-color: #ae85f1;
}

.sidebar ul li:hover .tooltip {
  transition: all 0.5s ease;
  top: 50%;
  
  display: block;
  z-index: 500;
}
  

.sidebar .link_name{
  opacity: 0;
  pointer-events: none;
}
.sidebar.active .link_name{
  opacity: 1;
  pointer-events: auto;
}

.sidebar .profile_content {
  position: absolute;
  color: #fff;
  bottom: 0;
  left: 0;
  width: 100%;
}

.logo_details .logo i {
  font-size: 28px;
  margin-right: 5px;
  left: 50%;
}

.sidebar .profile_content .profile{
  position: relative;
  padding: 10px 6px;
  height: 60px;
}

.profile_content .profile .profile_details{
  display: flex;
  align-items: center;
}

.profile .profile_details img{
  height: 45px;
  width: 45px;
  object-fit: cover;
  border-radius: 12px;
}
.profile .profile_details .name_job {
  margin-left: 10px;
}

.profile .profile_details .name{
  font-size: 15px;
  font-weight: 400;
}

.profile .profile_details .job{
  font-size: 12px;
}

/* --------------------------------------------------page styles */

.container {
  margin: 0 auto;
  padding: 60px 100px;
  position: absolute;
  background-color: green;
}

.headerBox h1 {
    display: block;
  padding-left: -20px;
    position: relative;
    font: 60px 'Lobster', cursive;
    letter-spacing: 0px;
    color: #e5383b; /*red web portfolio text*/
}
          
.headerBox {
    height: 300px;
    background-color: white;
    padding-left: 200px;
}
  


#footnote {
  font-size: 10px;
  text-align: center;
  color: #343434;
}

/* media queries */

@media screen and (max-width: 539px) {

.container {
  padding: 0px 25px;
  margin: 0px;
}
  

}
@media screen and (min-width: 540px) and (max-width: 699px) {
  
  .headerBox h1 {
    font: 80px 'Lobster', cursive;
    height: 60px;
  }

  h1:after {
    position: absolute; left: 3px; top: 3px;
  }

  .container {
    padding: 0px 30px;
    margin: 0px;
  }

  .headerBox h2 {
    font-size: 20px;
    display: block;
    line-height: 20px;
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 700px) and (max-width: 875px) {
  
  .headerBox h1 {
    font: 100px 'Lobster', cursive;
    height: 100px;

  }
  .container {
    padding: 0px 50px;
    margin: 0px;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>Personal Portfolio</title>
    <!--fonts
      font-family: 'Montserrat', sans-serif;
      font-family: 'Roboto Mono', sans-serif;
      font-family: 'Lobster', cursive;
      font-family: 'Comfortaa', cursive;
    -->.

    <link href="https://fonts.googleapis.com/css?family==Lobster" rel="stylesheet">
    <!--page css-->
    <link rel="stylesheet" type="text/css" href="css/styles.css">

    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
  </head>
  <body>
    <div class="sidebar">
        
      <div class="logo_details">
          <div class="logo">
            <i class='bx bx-moon'></i>
            <span class="logo_name">DRamirez</span>
          </div>
          <i class="bx bx-menu" id="btn"></i>
      </div>
          <ul class="nav_links">
              <li><a href="#">
                  <i class='bx bx-home'></i>
                  <span class="link_name">Home</span>
                  <span class="tooltip">Home</span></a>
              </li>
              <li><a href="#">
                  <i class='bx bx-paperclip'></i>
                  <span class="link_name">Resume</span>
                  <span class="tooltip">Resume</span></a>
              </li>

              <li>
                  <div class="icon_link" >
                      <a href="#">
                      <i class='bx bxl-javascript' ></i>
                      <span class="link_name">JS Games</span>
                      <span class="tooltip">JS Games</span></a>
                      <!--i class='bx bxs-chevron-down' ></i-->
                  </div>
              </li>

              <li><a href="#">
                  <i class='bx bxl-java' ></i>
                  <span class="link_name">Java Swing GUIs</span>
                  <span class="tooltip">Java Swing</span></a>
              </li>
              <li><a href="#">
                  <i class='bx bx-transfer'></i>
                  <span class="link_name">API Integration</span>
                  <span class="tooltip">API Integration</span></a>
              </li>
              <li><a href="#">
                  <i class='bx bx-data' ></i>
                  <span class="link_name">Data Visualization</span>
                  <span class="tooltip">Data Visualization</span></a>
              </li>
              <li><a href="#">
                  <i class='bx bx-landscape'></i>
                  <span class="link_name">Graphic Design</span>
                  <span class="tooltip">Graphic Design</span></a>
              </li>
              <li><a href="#">
                  <i class='bx bx-mail-send'></i>
                  <span class="link_name">Contact</span>
                  <span class="tooltip">Contact</span></a>
              </li>
            </ul>

            <div class="profile_content">
              <div class="profile">
                <div class="profile_details">
                  <img src="images/small-mugshot.jpg" alt="profileImage">
                  <div class="name_job">
                    <div class="name">Diana Ramirez</div>
                    <div class="job">Software Engineer</div>
                  </div>
                </div>
              </div>  
            </div>
        
            <!--section class="home-section">
              <div class="home-content">
                <i class="bx bx-menu"></i>
                <span class="text">Drop Down Sidebar</span>
              </div>
            </section-->
      <!--div class="cancel_btn">
          <i class="fas fa-times"></i>
      </div>
          
      <div class="media_icons">
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
      </div>
          
      <div class="menu_btn">
          <i class="fas fa-bars"></i>
      </div-->
          
      </div>
  
    
  testingtestingtestingtestingtestingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtestingtestingtesting
  testingtestingtestingtesting
  testingtesting
  testingtestingtestingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtestingtestingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  testingtesting
  <!--div class="container">
    
    <header>
        <div class="headerBox">
          <h1>Web Portfolio</h1>
          <h2>web portfolio test</h2>
          <h3>web portfolio test</h3>
        </div>
    </header>
   </div>
    
   <footer>
    <div class="footer-text">
      <p id="footnote">Content copyright 2022</p>
     </div>
   </footer-->
   <script src="js/script.js"></script>
</body>
</html>

为什么我的工具提示没有出现在 link 悬停时？

Why is my tooltip not showing up on link hover?

html

css

tooltip

hover