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

我为我的表单使用了jQuery验证插件。我的一个表单内元素的是这样的：无法隐藏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有什么问题吗？

来源

2013-01-19 Henry Gunawan

逻辑缺陷...只要标签隐藏它不再能够被徘徊如此正常的CSS生效...是一个递归的情况 – charlietfl

顺便说一句，你为什么要删除'悬停'错误消息？我从来没有见过一种形式表现得如此。无效字段将继续无效，直到完成了一些操作。（通常，只有在纠正输入数据时，才会删除错误消息。） – Sparky

@Sparky，因为在文本框中弹出的错误标签对于用户想要在文本框中输入内容时很烦人。 –

正如评论指出：

display: none删除元素，它不占空间了。因此它不再徘徊，因此它显示。

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

label.error:hover { 
    opacity: 0; 
}

如小提琴所示：

http://jsfiddle.net/6gBSL/

来源

2013-01-19 17:18:50

同样的问题http://jsfiddle.net/WEdNx/ – charlietfl

完全正确。不过，不透明就是这样做的。 –

+1也为IE添加'过滤器规则...好的解决方案 – charlietfl

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

回答

相关问题