好的，所以我试图制作一个徽标，当悬停在文本框上时显示“如果你在任何页面上看到这个图标，点击它返回索引。” - 我已经毫无困难地完成了这项工作，但是，我的问题是，当你将鼠标悬停在文本框的位置时（尚未显示），它会显示出来。这是相当烦人的，因为我希望文本框仅在您将鼠标悬停在徽标上时显示，而不是在文本框所在的悬停时。我的代码：
.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>.logoAlign:hover包含#hoverText，表明只要.logoAlign徘徊，就会在#hoverText上发生悬停行动。
相反，你可以通过检测img上的悬停来达到同样的效果。然后使用Adjacent Sibling Selector +选择#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>为了说明我的解决方案，我对您的代码进行了一些更改：
top: -100%;属性，这导致文本预览中出错。实际的解决方案是在CSS中使用相邻的兄弟调用：+，它允许在一个元素上放置一个hover监听器，同时改变其兄弟元素的CSS属性。
在这种情况下，监听器被添加到“红色按钮”，同时更改p标签内文本的不透明度。
.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>问题是不透明度会保留指针事件，因此仍然可以悬停并单击具有不透明度：0的元素。
你需要在你的pointer-events:none上设置.logovAlign #hoverText，或者从visiblity:hidden添加一个开关到visibility:visible，因为隐藏可见性的元素不会触发指针事件。
问题的例子（因为提供的代码不起作用）
.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>固定的例子
.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>现在我们已经摆脱了这种情况......更好的解决方案是使用徽标作为悬停元素而不是包含div，并使用兄弟选择器来启动悬停文本。就像是
#logo:hover + #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
这会有所帮助。我用过JavaScript而不是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>