jquery - 如何使用 jQuery 在单击输入框时使其他 div 变暗？

Question

我有 3 个输入框，我想将整个屏幕调暗，但正在单击的特定输入框除外。
我试过这个: http://jsbin.com/equre3/2

但是当我单击文本框时，包括文本框在内的所有内容都会变暗。

在文本框上单击这是我需要的。

all div: opacity: .5  
contactForm div: opacity .75  
current labelTextHolder div: opacity: 1    

此外，我应该在 CSS 中做哪些更改才能使文本和输入显示在一行中。

Answer 1

好的，这只是一个简单的示例...我不会为其制作动画或添加任何标签或输入或任何内容...但它的工作原理是这样的。关于操纵 CSS z-index 属性，最重要的是要记住任何具有 z-index 的元素都必须定位(即 position:relative、position :absolute 等):

HTML(假设):

<div id="overlay"></div>
<div id="div1" class="usable"></div>
<div id="div2" class="usable"></div>
<div id="div3" class="usable"></div>​

CSS:

​#overlay {
    position:absolute;
    height:100%;
    width:100%;
    background-color:#333;
    opacity: 0;
    z-index:0;
}

div.usable {
    position:relative;
    z-index:1;
    width:100px;
    height:100px;
    background-color:#F0F;
}

div.active {
    background-color:#F00;
    z-index:5;
}

jQuery:

​$(document).ready(function(){
    $("div.usable").hover(
    function(e){
        $("#overlay").css({"z-index":2,"opacity":.5});
       $(this).addClass("active"); 
    },
    function(e){
        $("#overlay").css({"z-index":0,"opacity":0});
        $(this).removeClass("active");
    }
  );
});​

至于整个“一行中的文本和输入”的事情，我建议考虑更改输入和标签的 display CSS 属性以将它们显示为内联或内联 block (如果是的话)在您的应用程序中可行。示例:

input.rowStyle {display:inline;}

希望这对您有所帮助!