没有不透明IF元素是可见的

如何获得这种效果，如果显示错误消息，窗体不应该失去其不透明性，但如果错误消息被隐藏，只有当窗体悬停时才应用不透明度？没有不透明IF元素是可见的

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 
     });

我尝试添加这条线上面的任何地方span.er设为show() jQuery函数：

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

^只有当span.er可见时才应用此设置。但是，问题在于，一旦显示错误消息，将应用不透明度设置，而不管span.er是可见还是隐藏。

来源

2011-04-08 input

在''opacity''中将''1'的''100'更改为''''''''。 – marcosfromero 2011-04-08 13:18:54

完成。感谢那。 – input 2011-04-08 13:29:30

这是否解决了问题？ – marcosfromero 2011-04-08 13:32:31

而不是操纵跨度的可见性，如果出现错误消息，您可以将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需要做的就是添加或删除的部分类名依赖，如果形式不/没有按” t通过验证

来源

2011-04-08 14:26:10 clairesuzy

：first-child {}不是一个跨浏览器的解决方案，但很好的答案:) – Val 2011-04-08 16:07:07

@Val，谢谢:) ..当然，我可以为第一个列表项添加一个“first”类，让它更向后兼容 - 我有点假设，因为代码是HTML5（部分），有各种各样的好看的IE解决方法已经到位 - 我只是想表明它是需要切换而不是内部跨度，这可能仍然显示空间或子弹;） – clairesuzy 2011-04-08 16:30:35

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

如果你觉得难

为上述当用户的代码，你很难理解你混淆了地狱了我们，把它放在要点的行动和他们的优先级鼠标移过<form>标签，它会将不透明度更改为1，除非其可见性将为0.5或50％

来源

2011-04-08 14:18:10 Val

没有不透明IF元素是可见的

回答

相关问题