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属性，以显示内联或内联块，如果这在你的内容是可行的应用。例如：

input.rowStyle {display:inline;}

希望这有帮助！

Answer 2

当您更改元素的不透明度时，所有子元素都会获得相同的不透明度。

两个选项：

1-如果您的目标浏览器支持它，请使用rgba作为容器的背景。

2-使用绝对定位重新排列元素，使您的内容不是容器的子容，但位于容器的上方。

如何使用jQuery点击输入框来调暗其他div？

2 个答案: