0

フォームにjQuery検証プラグインを使用しています。フォーム内の私の要素の1つは次のようなものです。

<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 に答える