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

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;
}

- G-SCO

---

重要的是你选择器中的 +。请查看 CSS 选择器 文档以选择正确的选择器。 - user1932079

“正确的内容”是什么应该显示？这是一个未明确说明的问题。看起来这是在尝试使用CSS做一些通常无法在CSS中完成且在JavaScript中相对简单的事情。 - Jukka K. Korpela

你想要这个(http://jsfiddle.net/wCPQj/7/)还是其他的？ - potashin

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

- Marc Audet

Answer 2

hello

使用~代替+ ~同级组合器类似于X + Y，但是它不太严格。当相邻选择器(X + Y)只选择紧接在前面选择器之后的第一个元素时，~更加通用。

- eldos

---

在这个例子中，任何一个链接都会打开所有兄弟节点 .element 元素，而不是 OP 想要的结果。 - Marc Audet

@MarcAudet，你可以使用我提到的更具体的选择器。 - eldos

Answer 3

在这里阅读有关内容属性的更多信息：http://www.w3schools.com/CSSref/pr_gen_content.asp 据我所知，您不能在悬停时使用它。 它还仅操作当前HTML元素的内容。

使用jQuery可以解决此问题。 请参见http://jsfiddle.net/fhD3A/

$（“a”）.hover（function（）{ $（'.element'）.html（'art'）; }）;

- Raimond Kuipers