CSS：悬停问题，不应该显示文本答案

【问题标题】：CSS :hover issue, displaying text when not supposed toCSS：悬停问题，不应该显示文本
【发布时间】：2018-08-11 06:12:41
【问题描述】：

好的，所以我正在尝试制作一个徽标，当将鼠标悬停在文本框上时会显示“如果您在任何页面上看到此图标，请单击它以返回索引。” - 我没有遇到任何麻烦，但是，我的问题是，当您将鼠标悬停在文本框所在的位置（尚未显示）时，它会显示自己。这很烦人，因为我希望文本框仅在您将鼠标悬停在徽标上时才显示，而不是在将鼠标悬停在文本框所在的位置时显示。我的代码：

.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>

【问题讨论】：

标签： html css hover

【解决方案1】：

.logoAlign:hover 包含#hoverText，表示只要悬停#hoverText，就会在.logoAlign 上执行悬停操作。

相反，您可以通过在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>

【讨论】：

【解决方案2】：

为了说明我的解决方案，我对您的代码进行了一些更改：

我已将图片更改为 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>

【讨论】：

【解决方案3】：

问题是 opacity 保留了指针事件，因此 opacity:0 的元素仍然可以悬停并单击。

您需要在.logovAlign #hoverText 上设置pointer-events:none，或者添加从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;
}

【讨论】：

【解决方案4】：

这会有所帮助。我使用了 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>

【讨论】：