Question

我正在为我的表单使用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>

这是上述表格的验证：

$("#registrationForm").validate({
    rules:{
        textStreetName: {required: true}
    }
});

验证效果很好。弹出类别为“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有什么问题吗？

Answer 1

如评论中所述：

display: none删除元素，它不再占用空间，因此它不会再被徘徊，所以它显示出来。

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

label.error:hover {
     opacity: 0;
}

如小提琴所示：

http://jsfiddle.net/6gBSL/

无法隐藏jQuery验证插件错误标签

1 个答案: