jQuery输入悬停、焦点和val时的不透明度更改

我尝试将输入字段设置为不透明度：0.8；如果鼠标位于输入字段上方，输入处于焦点且输入中有数据，则淡入1.0

如果上述任何一个条件都不成立，则将输入衰减回0.8

我将focus函数与mouseover/mouseout和change函数混合使用，用于验证输入的val（），但无法获得所需的效果

有人能帮忙吗

HTML

<form id="ajax-contact-form" class="contactForm">
    <label>Simply type your email.</label>
        <input class="textbox" name="email" type="text" value="">
        <input class="sendMessage" name="submit" value="Send Email" type="submit">
</form>

JQUERY

$(document).ready(function(){
    $("input.textbox").mouseover(function() {
    $('.textbox').fadeTo("slow", 1);
}).mouseout(function() {
    $('.textbox').fadeTo("slow", 0.8);
})

if($("input.textbox").val() === "") {
    $('.textbox').css({ opacity: 0.8});
} else {
    $('.textbox').css({ opacity: 1});

}

$('input.textbox').focus(function() {
        $(this).stop().fadeTo("slow", 1);
    }).blur(function() {
        $(this).stop().fadeTo("slow", 0.8);
    });

}))

试试这个-

试试这个-

---

发布您迄今为止尝试过的内容。。分享您迄今为止尝试过的代码。。共享代码

$(document).ready(function(){
    $("input.textbox").mouseover(function() {
    $('.textbox').fadeTo("slow", 1);
}).mouseout(function() {
    $('.textbox').fadeTo("slow", 0.8);
})

if($("input.textbox").val() === "") {
    $('.textbox').css({ opacity: 0.8});
} else {
    $('.textbox').css({ opacity: 1});

}

$('input.textbox').focus(function() {
        $(this).stop().fadeTo("slow", 1);
    }).blur(function() {
        $(this).stop().fadeTo("slow", 0.8);
    });

$("input")
    .on("mouseover focus",  function() { 
        $(this).animate({ opacity: 1 }); 
    })
    .on("mouseleave blur", function() {
        if ( $(this).val() == '' && !$(this).is(":focus") ) {
            $(this).animate({ opacity: .4 });
        }
    });