Question

当用户将鼠标悬停在侧边栏导航项上时，我当前正在尝试实现工具提示功能。它目前正在DOM中呈现，但是无论样式如何更改，我都无法显示它。我尝试添加z-index，更改显示和位置属性，但没有成功。那里的CSS专家都知道会导致什么吗？链接到代码笔here。

HTML：


<script src="https://kit.fontawesome.com/b61e574d7a.js"></script>

<div class="sidebar">
  <a href="#">
    <i class="fas fa-home"></i>
    <span class="tooltip">Home</span>
  </a>
  <a href="#">
    <i class="fas fa-chess-queen"></i>
    <span class="tooltip">Crown</span>
  </a>
  <a href="#">
    <i class="fas fa-history"></i>
    <span class="tooltip">History</span>
  </a>
  <a href="#">
    <i class="fas fa-paper-plane"></i>
    <span class="tooltip">Send</span>
  </a>
  <div class="sidebar-bottom">
    <a href="#">
      <i class="fas fa-comment-dots"></i>
      <span class="tooltip">Send feedback</span>
    </a>
    <a href="#">
      <i class="fas fa-user-circle preferences"></i>
      <span class="tooltip">Preferences</span>
    </a>
  </div>
</div>

<div id="main">
  hello
</div>

SCSS：

body {
  font-family: "Lato", sans-serif;
}

.sidebar {
  height: 100%;
  width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #7b68ee;
  transition: 0.5s;
  overflow-x: hidden;
  padding-top: 20px;
  white-space: nowrap;

  a {
    position: relative;
    left: 17.5%;
    text-decoration: none;
    text-align: center;
    font-size: 25px;
    border-radius: 90px;
    width: 20%;
    color: #ffffff;
    display: block;
    margin-bottom: 10px;
    height: 50px;
    width: 50px;

    &:hover {
      background: #ffffff1a;
      transition: 0.3s;
    }

    .fa, .far, .fas {
      line-height: 50px;
    }

    .tooltip {
      display: inline-block;
      position: absolute;
      background-color: black;
      padding: 8px 15px;
      border-radius: 3px;
      margin-top: -26px;
      left: 90px;
      opacity: 0;
      visibility: hidden;
      font-size: 13px;
      letter-spacing: .5px;

      &:before {
        content: '';
        display: block;
        position: absolute;
        left: -4px;
        top: 10px;
        transform: rotate(45deg);
        width: 10px;
        height: 10px;
        background-color: inherit;
      }
    }

    &:hover {
      background-color: green;

      .tooltip {
        visibility: visible;
        opacity: 1;
      }
    }

    &.active {
      background-color: pink;

      i {
        color: purple;
      }
    }   
  }

  .sidebar-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: 0;
  }
}

Answer 1

我对您的代码进行了调整，以使其正常运行。在:hover上，将通过span显示具有默认值display: none的{{1}}。您指的是锚点的透明度，但是您应该考虑锚点（display: block）元素内部的span。

请参见以下代码段，以解决您的问题。

.tooltip {
  font-size: 10px;
  background-color: rgba(0, 0, 0, .3);
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  left: 50%;
  display: none;
  padding: 2px 4px;
}

a:hover .tooltip {
  display: block;
}

body {
  font-family: "Lato", sans-serif;
}

.sidebar {
  height: 100%;
  width: 75px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #7b68ee;
  overflow-x: hidden;
  padding-top: 60px;
  white-space: nowrap;
}

.sidebar a {
  position: relative;
  left: 17.5%;
  text-decoration: none;
  text-align: center;
  font-size: 25px;
  border-radius: 90px;
  width: 20%;
  color: #ffffff;
  display: block;
  margin-bottom: 10px;
  height: 50px;
  width: 50px;
}

main .sidebar {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  padding: 16px;
  margin-left: 85px;
  transition: margin-left 0.5s;
}

.sidebar-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 4rem;
}

.fa,
.far,
.fas {
  line-height: 50px !important;
}

.tooltip {
  font-size: 10px;
  background-color: rgba(0, 0, 0, .3);
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  left: 50%;
  display: none;
  padding: 2px 4px;
}

a:hover .tooltip {
  display: block;
}

Answer 2

删除 c_id| b_id| c_value -------------- 1 | 1 | c1 2 | 1 | c2 3 | 1 | c3 4 | 2 | c1 5 | 2 | c2 6 | 2 | c3 7 | 4 | c2 8 | 6 | c1 9 | 6 | c2 10 | 6 | c3 11 | 7 | c1 12 | 7 | c2 13 | 7 | c3来自.sidebar类，并在overflow-x:hidden中进行了一些更改，并为.sidebar a .tooltip { top:10px; left:70px;}添加了一些样式

CSS

#main { padding-left:75px; width:100%;}

body {
	 font-family: "Lato", sans-serif;
}
 .sidebar {
	 height: 100%;
	 width: 75px;
	 position: fixed;
	 z-index: 1;
	 top: 0;
	 left: 0;
	 background-color: #7b68ee;
	 transition: 0.5s;
	 padding-top: 20px;
	 white-space: nowrap;
}
 .sidebar a {
	 position: relative;
	 left: 17.5%;
	 text-decoration: none;
	 text-align: center;
	 font-size: 25px;
	 border-radius: 90px;
	 width: 20%;
	 color: #fff;
	 display: block;
	 margin-bottom: 10px;
	 height: 50px;
	 width: 50px;
}
 .sidebar a:hover {
	 background: #fff 1a;
	 transition: 0.3s;
}
 .sidebar a .fa, .sidebar a .far, .sidebar a .fas {
	 line-height: 50px;
}
 .sidebar a .tooltip {
	 display: inline-block;
	 position: absolute;
	 background-color: black;
	 padding: 8px 15px;
	 border-radius: 3px;
	 top: 10px;
	 left: 70px;
	 opacity: 0;
	 visibility: hidden;
	 font-size: 13px;
	 letter-spacing: 0.5px;
}
 .sidebar a .tooltip:before {
	 content: '';
	 display: block;
	 position: absolute;
	 left: -4px;
	 top: 10px;
	 transform: rotate(45deg);
	 width: 10px;
	 height: 10px;
	 background-color: inherit;
}
 .sidebar a:hover {
	 background-color: green;
}
 .sidebar a:hover .tooltip {
	 visibility: visible;
	 opacity: 1;
}
 .sidebar a.active {
	 background-color: pink;
}
 .sidebar a.active i {
	 color: purple;
}
 .sidebar .sidebar-bottom {
	 position: absolute;
	 bottom: 0;
	 width: 100%;
	 margin-bottom: 0;
}
 #main {
     padding-left: 75px;
     width:100%;
}

侧边栏工具提示未显示在锚点悬停上

2 个答案: