为什么我的工具提示没有显示在链接悬停时？

Question

几天来我一直在尝试让我的工具提示显示出来，但没有任何进展。当不透明度为 1 时，如果您想查看它们应该是什么样子，它们可以通过块选择器 .sidebar ul li .tooltip {} 显示在侧边栏中。

我尝试将 z-index 添加到 .sidebar ul li a:hover .tooltip {} 选择器以及 opacity:1，但这不起作用。

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

这是不透明度的问题还是选择器的问题？我感觉我已经尝试了一切。

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

任何帮助将不胜感激，谢谢。

.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 中存在一些问题，您需要更新代码中的以下更改。

更改 1：

从第 32 行 ul CSS 中删除 overflow: hide;

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

更改 2：

添加 display: none; on sidebar ul li a .tooltip CSS on line No: 123

.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;
}

Change 3:

Add !important on sidebar.active ul li .tooltip CSS on line No: 141

.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/[email protected]/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>