Question

如何获得此效果，如果显示错误消息，表单不应失去其不透明度，但如果隐藏错误消息，则仅在表单悬停时才应用不透明度？

HTML：

<section>
    <form id="form" name="form" action="login.php" method="post">  

    <ul>
        <li>
        <span class="er" style="display:none;">&nbsp;</span>
        </li> <br />

        <li>
        <label for="name">Name</label>  
        <input type="text" name="name" id="name" />       
        </li>

        <li> 
        <label for="pass">Password</label>  
        <input type="password" name="pass" id="pass" />  
        </li>

    </ul>
        <input type="submit" value="Log In" />  

</form>  
</section>

CSS：

section { 
     opacity: 0.5;
     transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out;
     -o-transition: all 1s ease-in-out;  
}

section:hover{
    opacity: 100;
     transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1 ease-in-out;
     -o-transition: all 1s ease-in-out;
}

jQuery的：

$('#form').bind('submit', function (e) {
            var self = $(this);

            jQuery.post(self.attr('action'), self.serialize(), function (response) {
                if ($("#name").val() == "" || $("#pass").val() == "") {
                    $("span.er").text('Field cannot be blank!');
                                    $("span.er").show();    
                }
                else if (response.success) {
                    window.location.href='home.php';
                } else {
            $("span.er").text('Invalid username or password! Please try again.');
                    $("span.er").show();
                }
            }, 'json');

            e.preventDefault(); //prevent the form being posted 
        });

我尝试将此行添加到上面的jQuery函数中，只要span.er设置为show()：

$("section").css('opacity', '100');

^仅当span.er可见时才应用此设置。但问题是，一旦显示错误消息，无论span.er是可见还是隐藏，都会应用不透明度设置。

Answer 1

而不是操纵范围的可见性，如果要出现错误消息，您可以将er类添加到父section元素本身

从那里你可以控制包含你的信息的实际li的可见性，例如

section li:first-child {display: none;}
section.er li:first-child {display: block;}

以及同时悬停过渡：

section { 
     display: block;
     opacity: 0.5;
     transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out;
     -o-transition: all 1s ease-in-out;  
}

section.er, section:hover {
    opacity: 100;
     transition: all 1s ease-in-out;
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1 ease-in-out;
     -o-transition: all 1s ease-in-out;
}

所有jQuery需要做的是从依赖于表单是否/未通过验证的部分添加或删除类名

Answer 2

$('form').mouseover(function (){
  $('span.er').css('opacty':1);
  if(!$("span.er:visible")){
     $('form').css({'opacity',0.5});
  }
});

而且你很难理解你已经把我们弄糊涂了，如果你发现那么困难就把它放在行动和优先级上

对于上面的代码，当用户将鼠标悬停在<form>标签上时，它会将不透明度更改为1，除非其可见性为0.5或50％

没有不透明度IF元素可见

2 个答案: