我在尝试弄清如何使文本框根据悬停在哪个链接上来更改内容时遇到了麻烦。我可以让它与最接近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;
}
您需要以下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。
需要同级组合器(〜)来选择同级元素,请参见参考。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句