Geek Answers Handbook

Projection Range: Hangs to keep the span visible

I set the span elements so that they appear only when the buttons hang. I would like the range to continue to be visible if the cursor then moves to the span element. (This is already happening in Chrome by default.) I thought I could only do this with span:hover {visibility: visible}, but that would not work. Do I need to add something else, or is something else wrong?

cited CSS:

.tooltipT {
  position: absolute;
}
.tooltipT span {
  position: absolute;
  width: 0px;
  visibility: hidden;
}
.tooltipT:hover span, .tooltipT span:hover {
  visibility: visible;
  width: 400px;
  }
.tooltipT:hover span, .tooltipT span:hover {
  bottom: 16px;
  left: -200px;
}

HTML cited:

<div class="pix">
             <button class="tooltipT" style="top: 50%; left: 50%;">1
                    <span>blah
                    </span>
             </button>
            <img src="img/MIPs.jpg" alt="Melt-in-Place Station details">
</div>

In it here , the image with the span element turned on is halfway down the page, it is used on the pink button in the middle.

I put it on Codepen and now I play with the proposed solutions.

+4
2

JavaScript, , ( ), , CSS . :

 button.addEventListener("mouseover", function(){
    span.setAttribute("class", "tooltip");
 });

, , .

+2

, . element ~ element element + element, .

body {
  background: honeydew;  
}

.tooltipT {
  position: absolute;
  background: tomato;
  width: 50px;
  height: 50px;
}

span {
  position: absolute;
  width: 50px;
  height: 50px;
  visibility: hidden;
  background: gold;
  border: 3px solid black;
  top: calc(40% - 40px);
  left: calc(50% + 40px);
}

span:hover, .tooltipT:hover ~ span {
  visibility: visible;
}

button {
  border: 3px solid black;
  top: 40%;
  left: 50%; 
}

button:hover {
  background: red;
}
<button class="tooltipT">0</button>
<span>_blah</span>
Hide result
+2

More articles:


All Articles