为什么我的工具提示没有出现在链接悬停上？

Question

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

我尝试将z索引添加到.sidebar ul li a:悬浮.tooltip {}选择器中，同时添加了透明度:1，但这是行不通的。

我还试着改变“悬停”以应用于“li”，而不是“a”标签，但这并没有改变任何事情。并尝试将其添加到两者(.sidebar ul li:悬停a：.tooltip {})，但也不起作用。

这是不透明的问题，还是选择因素的问题？我觉得我什么都试过了。

当我在browser dev tools中选择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中很少有问题，您需要在代码更改下面进行更新。

Change 1:

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

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

Change 2:

在第123号行的display: none;上添加sidebar ul li a .tooltip CSS

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

在第141号线上添加!important on sidebar.active ul li .tooltip CSS

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

​