html - 如何在悬停时更改文本框内容

Question

我无法弄清楚如何让文本框根据鼠标悬停在哪个链接上来更改内容。我可以让它与最接近 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;
}

Answer 1

您需要以下 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。

需要兄弟组合符 (~) 来挑选兄弟元素，请参阅引用资料。

引用:http://www.w3.org/TR/selectors/#sibling-combinators