Can'；t隐藏jQuery验证插件'；s错误标签

我正在为我的表单使用jQuery验证插件。表单中的一个元素如下所示：

<form name="registrationForm" id="registrationForm" action="" method="POST">
    <span class="component-wrapper">
        <input type="text" name="textStreetName" size="50" value="<?php echo $field['textStreetName'];?>"/>
    </span>
</form>

验证工作进行得很好。弹出一个带有类“error”的标签，说明该字段是必需的。但当我停留在错误标签上时，它不会消失。这是我的CSS：

.component-wrapper {position: relative;}

label.error {
    position: absolute;
    top: 20%;
    left: 20%;
    z-index: 100;
    background: #FFF;
    border: 1px solid #FF0000;
    font-size: 10pt;
    width: 280px;
    padding: 2px;
}

label.error:hover {
    display: none;
}

---

我的CSS有什么问题吗？

如评论中所述：

display:none

删除元素，它不再占用空间，因此不再悬停，因此显示

您可以将不透明度设置为0：

label.error:hover {
     opacity: 0;
}

如小提琴所示：

---

逻辑缺陷。。。一旦标签被隐藏，它就不能再被悬停，所以正常的css会生效。。。是递归情况顺便问一下，为什么要删除悬停时的错误消息？我从来没见过有人这样做。无效字段将继续无效，直到对其采取措施为止。（通常，只有当输入数据被更正时，错误消息才会被删除。）@Sparky，因为当用户想要在文本框上输入内容时，文本框上弹出的错误标签会让用户感到恼火。因此，不要让消息覆盖

输入。再说一次，我从来没有见过一个表单做过这样的事情。我的其他想法是在屏幕外设置文本缩进，删除背景和边框…或者在悬停父项时使用jQuery隐藏这包含了对我们心爱的IE的攻击。（天哪，我多么讨厌这个浏览器）。
label.error:hover {
     opacity: 0;
}