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");
   }
);

Answer 2

此选项适用于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>

对于你的其他形式，只需更改id hint2，hint3等

<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>

在悬停时显示隐藏的css类

2 个答案: