The problem lies in the fact that opacity retains the pointer-events, allowing elements with opacity:0 to still be hovered over and clicked on.
To resolve this, you can either add pointer-events:none to your .logovAlign #hoverText, or switch from visibility:hidden to visibility:visible, as elements with hidden visibility won't trigger pointer-events.
Here is an example demonstrating the issue (as the provided code doesn't fully address it)
.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>
Corrected 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>
A more effective solution would be to use the logo itself as the hover element instead of the containing div, and utilize a sibling selector to target the hover text.
For instance:
#logo:hover + #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}