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

问题描述：

我无法弄清楚如何根据链接被悬停在什么位置使文本框更改内容。我可以得到它工作与任何一个最接近的div，但其他链接似乎没有效果。我不想要在链接之间插入文本，也不想创建几个文本框。我的主要目标是让链接总是在同一个地方，当你将鼠标悬停在它们下面的文本框将显示正确的内容。

I am having trouble trying to figure out how I can make a text box change content depending on what link is being hovered over. I can get it to work with which ever one is closest to the div but the other links seem to have no effect. I do not however want to have text being inserted in between the links nor do I want to create several text boxes. My main goal is to have the links always in the same place and when you hover over them a text box underneath will display the correct content.

这里是一些代码和JSFiddle我一起帮助更好地说明我的问题：
JSFiddle

Here is some code and a JSFiddle I threw together to help better illustrate my question: 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;
}

答

-up：

<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：

and then apply the following 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稍微重复，但它工作

The CSS is slightly repetitive but it works and no JavaScript required.

需要同级组合器（〜）来挑选兄弟元素，请参阅参考。

The sibling combinator (~) is needed to pick out sibling elements, see reference.

参考文献： http://www.w3.org/TR/selectors/#sibling -combinators

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

相关推荐