沒有不透明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元素是可見的

回答

相關問題