Question

i have a wordpress site that when a form is filled out, if an error is thrown then the plugin shows a <span> with the error text within.

Im trying to fade that text out using jQuery and I have tried both the following to no avail…

$(".wpcf7-not-valid-tip").on("mouseenter", function(){
        alert( 'test');
});
$('.wpcf7-not-valid-tip').hover(
      function () {
       $(this).fadeOut();
});

My HTML markup is being outputted as so…

<span class="wpcf7-form-control-wrap telno">
    <input type="text" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required field wpcf7-not-valid" value="" name="telno">
    <span class="wpcf7-not-valid-tip">Please fill the required field.</span>
</span>

Answer 1

Is it possible you are binding the events before the item exists?

try this and see if you have more luck

$('.wpcf7-not-valid-tip').live('mouseenter', function(ev) {
    $(this).fadeOut();
});

or

$(".wpcf7-not-valid-tip").on("mouseenter", function(ev){
    $(this).fadeOut();
});