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

Posted 2023-03-06

【中文标题】如何在悬停时更改文本框内容

【英文标题】：How To Change Text Box Content On Hover

【发布时间】：2014-08-12 06:05:05

【问题描述】：

我无法弄清楚如何根据悬停在哪个链接上来更改文本框的内容。我可以让它与最接近 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;

【问题讨论】：

重要的是您的选择器（+）。查看CSS selectors 文档以选择正确的选择器。

应该显示的“正确内容”是什么？这是一个未充分说明的问题。它看起来也像是尝试在 CSS 中做一些通常不能在 CSS 中完成并且在 javascript 中相当简单的事情。

你想要this还是什么？

【参考方案1】：

在此处阅读有关 content 属性的更多信息：http://www.w3schools.com/CSSref/pr_gen_content.asp 当我读到它时，你不能将它与悬停一起使用。它也只操作当前 html 元素的内容。

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

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

【参考方案2】：

您需要以下 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

【参考方案3】：

<div class="element special">hello</div> 使用~ 而不是+

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

~ 同级组合子类似于X + Y，但是不那么严格。虽然相邻选择器(X + Y) 只会选择前一个选择器紧接在其前面的第一个元素，但~ 更通用。

【讨论】：

在本例中，任何链接都将打开所有同级 .element 元素，而不是 OP 想要的。

@MarcAudet 你可以像我提到的那样使用更具体的选择器