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

Answer 2

<div class="element special">hello</div> 使用~代替+

a:hover ~ .element.special { display: block; }

~兄弟组合器类似于X + Y，但它不那么严格。虽然相邻的选择器(X + Y)只会选择前一个选择器前面的第一个元素，但~会更加通用。

Answer 3

在此处详细了解内容属性：http://www.w3schools.com/CSSref/pr_gen_content.asp 当我读它时，你不能在悬停时使用它。它也只操纵当前htmlelement的内容。

使用jQuery，你可以解决这个问题。见http://jsfiddle.net/fhD3A/

$("a").hover(function() { $('.element').html('art'); });

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

3 个答案: