0

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

验证效果很好。弹出一个带有“错误”类的标签，说明该字段是必需的。但是当我将鼠标悬停在错误标签上时，它不会消失。这是我的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 有什么问题吗？

4

1 回答 1

1

如评论中所述：

display: none删除元素，它不再占用空间，因此它不再悬停，所以它显示。

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

label.error:hover {
     opacity: 0;
}

如小提琴所示：

http://jsfiddle.net/6gBSL/

于 2013-01-19T17:18:50.473 回答