問題描述
我無法弄清楚如何根據懸停在哪個鏈接上來更改文本框的內容.我可以讓它與最接近 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;
}
推薦答案
您需要以下 HTML 標記:
You need the follwing HTML mark-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 略有重復,但可以正常工作,不需要 JavaScript.
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/#兄弟組合器
這篇關于如何在懸停時更改文本框內容的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網!