如何在Hover上更改文本框内容
我很难弄清楚如何使文本框改变内容，这取决于哪个链接正在悬停。我可以让它的工作，其中一个是最接近的div，但其他的链接似乎没有任何影响。但是，我不希望在链接之间插入文本，也不希望创建多个文本框。我的主要目标是使链接始终在同一个位置，当您悬停在它们上面时，下面的文本框将显示正确的内容。
下面是一些代码和一个JSFiddle，以帮助更好地说明我的问题：JSFiddle
HTML：
<a class="one" href="#">one</a>
<a class="two" href="#">two</a>
<a class="three" href="#">three</a>
<div class="element">hello</div>CSS：
.element {
display: none;
}
a:hover + .element {
display: block;
}回答 3
Stack Overflow用户
发布于 2014-06-21 11:13:37
您需要折叠HTML标记：
<a href="#" class="a-1">one</a>
<a href="#"class="a-2">two</a>
<a href="#"class="a-3">three</a>
<div class="element-1">hello one</div>
<div class="element-2">hello two</div>
<div class="element-3">hello three</div>然后应用以下CSS：
.element-1, .element-2, .element-3{
display: none;
}
.a-1:hover ~ .element-1 {
display: block;
}
.a-2:hover ~ .element-2{
display: block;
}
.a-3:hover ~ .element-3 {
display: block;
}参见演示：http://jsfiddle.net/audetwebdesign/p7WUu/
CSS有点重复，但工作正常，不需要JavaScript。
需要同级组合器(~)来选择同级元素，参见参考。
Stack Overflow用户
发布于 2014-06-21 11:14:32
<div class="element special">hello</div>使用~而不是+
a:hover ~ .element.special { display: block; }
~兄弟级组合器类似于X + Y，但是它不那么严格。虽然相邻的选择器(X + Y)只会选择前面紧跟前一个选择器的第一个元素，但~更具有普遍性。
Stack Overflow用户
发布于 2014-06-21 11:11:49
在这里阅读更多关于内容属性的内容：content.asp，当我阅读它时，您不能在悬停中使用它。它还只操作当前also元素的内容。
使用jQuery，您可以解决这个问题。请参阅http://jsfiddle.net/fhD3A/
$("a").hover(function() { $('.element').html('art'); });
https://stackoverflow.com/questions/24344921
复制
相似问题
组合框外观
给WixUIExtension对话框一个稍微更现代的外观
对话框中表格中的jqueryui组合框外观错误
对话框具有现代外观的时间设计，但旧外观的运行时(使用可视C++和资源编辑器)
Javascript气球外观对话框
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
