如何在固定块的悬停上更改文本框内容？(其他解决方案不起作用)
因此，我遵循了另一个主题的解决方案，但我设置的描述仍然不想出现在文本框中。
我已经尝试过了：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>
预期:文本出现在描述框中。
结果:什么都没有发生。
是不是浏览器坏了？
回答 1
Stack Overflow用户
发布于 2019-06-06 09:56:51
：:target不会触发一些‘点击’，‘点击’或‘滑动’事件，否则你可以使用鼠标选择器(W3Schools on :target)。但是，请看一下我的代码，您会发现我将“目标”文本设为<a>元素中的一个子级，并且最初将其隐藏起来。
在“悬停”按钮上，目标文本被定位在“Description”和“display: block”的下方。这基本上就是所有的内容了。
And...you仍然会保持你的'<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>
Alternate:除了你已经尝试过的链接之外，：如果你不喜欢<a>中的<span>，那么在你已经拥有的<ul>中，让‘’元素也成为一个<li>。最初将它们隐藏起来，并在“选择”<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>
https://stackoverflow.com/questions/56466880
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号