CSS :hover issue, displaying text when not supposed to - html

Question

OK, so I am trying to make a logo that when hovered on a text box is revealed saying "If you see this icon on any of pages, click it to return to the index." - I've done this with no trouble, however, my problem is that when you hover where the text box would be (without it being revealed yet) it reveals itself. This is rather annoying as I am wanting the text box to show only when you hover over the logo, not when the hover where the text box would be. My code:
.logovAlign #hoverText {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
top: -100%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
}
.logovAlign:hover #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
<div class="logovAlign">
<img src="images/favicon.png" width="50" height="50" alt "Lighting Bolt Logo">
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>

Answer 1

.logoAlign:hover contains the #hoverText, suggesting a hover action take place on .logoAlign whenever #hoverText is hovered.
Instead you can achieve the same with detecting hover on the img. Then using the Adjacent Sibling Selector + to select #hoverText.
.logovAlign #hoverText {
background-color: rgba(255,255,255,0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
/*top: -100%;*/
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
}
.logovAlign img:hover + #hoverText {
opacity: 1;
transition: opacity 0.3s ease-in;
}
<div class="logovAlign">
<img src="http://via.placeholder.com/350x150" width="50" height="50" alt"Lighting Bolt Logo">
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>

Answer 2

I made a couple of changes in your code, in order to illustrate my solution:
I've changed the picture to a div, so it would be shown no matter what.
I've removed the top: -100%; property, which caused an error in the text's preview.
The actual solution was using the adjacent sibling call in CSS: +, which allows to put an hover listener on one element, while changing its sibling element's CSS properties.
In this case, the listener was added to the "red button", while changing the opacity of the text inside the p tag.
.logovAlign #hoverText {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
}
#button {
width: 50px;
height: 50px;
background-color: red;
}
#button:hover + #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
<div class="logovAlign">
<div id="button"></div>
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>

Answer 3

The issue is that opacity keep the pointer-events, so elements with opacity:0 can still be hovered and clicked on.
You need to either set pointer-events:none on your .logovAlign #hoverText, or add a switch from visiblity:hidden to visibility:visible, as elements with visibility hidden won't trigger pointer-events.
example with the issue (since the provided code doesn't really work)
.logovAlign{
display:inline-block;
}
.logovAlign #hoverText {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
}
.logovAlign #logo {
width: 30px; height: 30px;
background-color: lime;
display:inline-block;
}
.logovAlign:hover #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
<div class="logovAlign">
<div id="logo"></div>
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>
Fixed example
.logovAlign{
display:inline-block;
}
.logovAlign #hoverText {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
pointer-events:none;
}
.logovAlign #logo {
width: 50px; height: 50px;
display:inline-block;
background-color: lime;
}
.logovAlign:hover #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
<div class="logovAlign">
<div id="logo"></div>
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>
Now that we got rid of how this happens... a much better solution would be to use the logo as the hover element instead of the containing div, and use a sibling selector to actuate on the hover text.
Something like
#logo:hover + #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}

Answer 4

This will help. I had used JavaScript instead of css.
var span = document.getElementById("text");
function a() {
span.style.visibility = "visible";
}
function b() {
span.style.visibility = "hidden";
}
<!DOCTYPE html>
<html>
<body>
<img src="https://i.stack.imgur.com/8ALM5.png" id="img1" class="img1" onmouseover="a();" onmouseout="b();"/>
<span class="text" id="text" style="visibility:hidden;">If you see this icon on any of pages, click it to return to the index.</span>
</body>
</html>