Question

I’m using jQuery validation plugin for my form. One of my element inside a form is like this:

<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>

And this is the validation for the form above:

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

The validation worked nicely. A label with class “error” is popped up saying that that field is required. But when I hover onto the error label, it won’t disappear. Here is my 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;
}

Is there anything wrong with my CSS?

Answer 1

As stated in the comment :

display: none removes the element, it doesn’t occupy space anymore thus it’s not hovered anymore, so it shows.

You could set the opacity to 0 :

label.error:hover {
     opacity: 0;
}

As shown in the fiddle :

http://jsfiddle.net/6gBSL/