Question

我试图使，当鼠标悬停在文本“ Hover over me”上时，出现/消失文本“ Tooltip text”，并显示以下代码：

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

div .tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

<body style="text-align:center;">

  <h2>Tooltip</h2>
  <p>Move the mouse over the text below:</p>

  <div class="wrapper">
    <div class="header">
      <div class="head">
        <div class="nav">
          <div class="tooltip"> Hover over me
          </div>
        </div>
        <div class="test">
          <span class="tooltiptext">Tooltip text</span>
        </div>
      </div>
    </div>
  </div>
</body>

经过几次尝试，我得出的结论是它不起作用，因为它们位于两个不同的<< strong> div >中。所以我想知道是否有可能使它工作，谢谢。

Answer 1

<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

div .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
  
  .tooltiptext {
    visibility:hidden;
  }

.tooltip:hover + .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="wrapper">
    <div class="header">
        <div class="head">
          
                <div class="tooltip">   Hover over me
                </div>
           
            <div class="tooltiptext">Tooltip text</div>
        </div>
    </div>
</div>
</body>
</html>

两个不同的div之间的CSS悬停功能

1 个答案: