無法隱藏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驗證插件的錯誤標籤

回答

相關問題