CODEWITHSUNDEEP
htmlcss
nabasoki
nabasoki

Reputation: 57

CSS hover function between two different divs

I was trying to make, when mouse go over the text "Hover over me", appear/disappear the text "Tooltip text" whit this code:

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

After a couple of attempts I came to the conclusion that it does not work because they are in two different <div>. So I was wondering if it was possible to make it work, Thanks.

Upvotes: 1

Views: 48

Answers (1)

doğukan
doğukan

Reputation: 27381

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

Upvotes: 3

Related Questions