如何在固定块悬停时更改文本框内容？（其他解决方案无效）答案

【问题标题】：How To Change Text Box Content On Hover of a Fixed block? (Other solution didn't work)如何在固定块悬停时更改文本框内容？（其他解决方案无效）
【发布时间】：2019-10-21 08:11:36
【问题描述】：

所以我遵循了其他主题的解决方案，但我设置的描述仍然不想出现在文本框中。

我已经尝试过了：How To Change Text Box Content On Hover 我仔细检查了css中的每个类名，但仍然没有。可能是什么问题？

相关部分代码：

a {
  text-decoration: none;
}

a:link {
  color: #3ea500;
}

.a-1:hover~.element-1 {
  display: block;
}

.a-2:hover~.element-2 {
  display: block;
}

.a-3:hover~.element-3 {
  display: block;
}

a:hover {
  color: #cc7400;
  font-weight: 700;
}

.desc {
  background-color: green;
  width: 33%;
  position: fixed;
  border-radius: 5px;
  left: 66%;
  top: 180px;
}

<body>
  <div class="desc">
    Description:
    <div class="element-1">hello one</div>
    <div class="element-2">hello two</div>
    <div class="element-3">hello three</div>
  </div>
  <div>
    <ul>
      <li>
        <a class="a-1" href="#" target="_blank">Deepdream generator.</a>
      </li>
      <li>
        <a class="a-2" href="#" target="_blank">Picture Breeder</a>
      </li>
      <li>
        <a class="a-3" href="#" target="_blank">AI guesses what you draw</a>
      </li>
    </ul>
  </div>
</body>

预期：文本出现在描述框中。

结果：什么都没有发生。

可能是浏览器坏了？

【问题讨论】：

~ 是 the general sibling combinator。您已经更改了答案的 HTML，使得元素不再是兄弟元素。
a-1:hover ~ .element-1 等。您根本无法这样做，因为您的 .a-1 位于 .element-1 下方。见developer.mozilla.org/en-US/docs/Web/CSS/…
规则：X ~ Y => 选择在之前有一个 X 元素的每个 Y 元素。您的“目标”.element-x 类在“选择”类.a-x 之前，而不是相反。其次，当您更正了这一点后，您会看到“目标”元素前面有 <ul>（不是 <a>），只是与它们的“选择器”不在同一嵌套级别。它不会这样工作......

标签： html css hover

【解决方案1】：

：悬停不会触发一些“点击”、“点击”或“滑动”事件，否则您可以使用:target 选择器（W3Schools on :target）。但是，查看我的代码，您会发现我将“目标”文本设置为 <a> 元素内的子元素，并最初将其隐藏。

在“悬停”时，目标文本位于“描述”下方的“absolute”和display: block'ed。这基本上就是它的全部内容。小小的小技巧，原版 CSS 并且不需要 Javascript...

而且...您的“<ul><li>”结构仍然完好无损。

当我遇到问题时，我总是会追溯并简化。

更新 1：

当您想要在“描述”框中添加“目标”文本时，只需增加该框的高度，当您将 z-index: 1 添加到 .target 类时，它将被放置在该框的顶部...

更新 2：

搜索“css stacking context”以了解z-index 以及如何“分层”您的文档。

a {
  text-decoration: none;
}
a:link, a:visited {
  color: #3ea500;
}
a:hover {
  color: #cc7400;
  font-weight: 700;
}
.desc {
  background-color: green;
  width: 33%;
  position: fixed;
  border-radius: 5px;
  left: 66%;
  top: 180px; height: 38px /*update*/
}

a>.target       { display: none; z-index: 1 /*update*/ }
a:hover>.target { display: block; position: absolute; left: 66%; top: 199px; color: black }

<ul>
    <li><a href="#" target="_blank">Deepdream generator.    <span class="target">hello one  </span></a></li>
    <li><a href="#" target="_blank">Picture Breeder         <span class="target">hello two  </span></a></li>
    <li><a href="#" target="_blank">AI guesses what you draw<span class="target">hello three</span></a></li>
</ul>

<div class="desc">Description</div>

替代：除了您已经尝试过的链接：如果您不喜欢<a> 中的<span>，请将“目标”元素也设置为@ 中的<li> 987654335@你已经有了。当它的“选择”<a> 悬停时，最初隐藏它们并将它们放置在其他地方。

结果相同，代码略有不同：

a {
  text-decoration: none;
}
a:link, a:visited {
  color: #3ea500;
}
a:hover {
  color: #cc7400;
  font-weight: 700;
}
a:hover {
  color: #cc7400;
  font-weight: 700;
}
.desc {
  background-color: green;
  width: 33%;
  position: fixed;
  border-radius: 5px;
  left: 66%;
  top: 180px;
  height: 38px /*add*/
}

.target            { display: none; z-index: 1 }
li:hover + .target { display: block; position: absolute; left: 66%; top: 199px; color: black }

<ul>
    <li><a href="#" target="_blank">Deepdream generator.</a></li>
    <li class="target">hello one</li>
    <li><a href="#" target="_blank">Picture Breeder</a></li>
    <li class="target">hello two</li>
    <li><a href="#" target="_blank">AI guesses what you draw</a></li>
    <li class="target">hello three</li>
</ul>

<div class="desc">Description</div>

【讨论】：