Styling span:hover to make span element remain visible - html

Question

I've set up span elements to be visible only when buttons are hovered over. I'd like the span to continue to be visible if the cursor is then moved onto the span element. (This already happens in Chrome by default.) I thought I could do that just with span:hover {visibility: visible}, but it doesn't work. Do I need to add something else as well, or is something else wrong?
reduced 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;
}
reduced HTML:
<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>
It's live here, the image with the span element involved is half-way down the page, it is used on the pink button in the middle.
I put it on Codepen and am playing with suggested solutions there.

Answer 1

You'll need JavaScript here because the minute you move off the button (to move towards the now visible span), the button is no longer being hovered and so the CSS class no longer applies. This should do it:
button.addEventListener("mouseover", function(){
span.setAttribute("class", "tooltip");
});
Obviously, replace button with the id of your button and tooltip with the name of the class that should be applied when the button is moused over.

Answer 2

It does work if you let the span outside of the button. In this case you'll need the element ~ element or element + element selector to show up the span when hovering the button.
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>