在悬停时显示隐藏的 css 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5134415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display hidden css class on hover
提问by Jay
I have few form fields, each input and label is wrapped inside a div in following way:
我有几个表单字段，每个输入和标签都以以下方式包装在一个 div 中：
<div class="field">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p class="hint">Enter your name</p>
</div>
the hint class is initially hidden like display:none.
提示类最初是隐藏的 display:none.
How can I display the hidden hint class on hover anywhere in class field. Thanks.
如何在类字段中的任何位置悬停时显示隐藏提示类。谢谢。
回答by Nils Werner
In CSS you can do it the following way:
在 CSS 中，您可以通过以下方式进行操作：
.hint { display: none; }
.field:hover .hint { display: block; }
Edit:As Karl said, this will not work in Internet Explorer 6. You can, however, resort to JavaScript (in this example using jQuery) to do that:
编辑：正如 Karl 所说，这在 Internet Explorer 6 中不起作用。但是，您可以使用 JavaScript（在本例中使用 jQuery）来做到这一点：
jQuery(".field").hover(
function() {
jQuery(this).find(".hint").css("display","block");
},
function() {
jQuery(this).find(".hint").css("display","none");
}
);
回答by Web_Designer
This option will work in IE 4 and later.
此选项适用于 IE 4 及更高版本。
<div class="field" onmouseover="document.getElementById('hint').style.display='none';" onmouseout="document.getElementById('hint').style.display='block';">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p id="hint">Enter your name</p>
</div>
And for your other forms just change the id hint2, hint3, etc.
对于您的其他表单，只需更改 id 提示 2、提示 3 等。
<div class="field" onmouseover="document.getElementById('hint2').style.display='none';" onmouseout="document.getElementById('hint2').style.display='block';">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p id="hint2">Enter your name</p>
</div>
