css - 悬停时显示隐藏的CSS类

Question

我有几个表单字段，每个输入和标签都按以下方式包装在一个 div 中:

<div class="field">
    <label for="name">Name:</label>
    <input type="text" class="input" name="name" />
    <p class="hint">Enter your name</p>
</div>

提示类最初是隐藏的，如 display:none.

如何在悬停在类字段中的任何位置时显示隐藏的提示类。谢谢。

Answer 1

在 CSS 中，您可以按以下方式进行:

.hint { display: none; }
.field:hover .hint { display: block; }

编辑:正如 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");
   }
);