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

【问题标题】：How to dim other div on clicking input box using jQuery?如何在使用 jQuery 单击输入框时使其他 div 变暗？
【发布时间】：2011-04-07 08:05:51
【问题描述】：

我有 3 个输入框，我想将整个屏幕调暗，除了被点击的特定输入框。
我试过这个： http://jsbin.com/equre3/2

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

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

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

另外，我应该在 CSS 中进行哪些更改以使文本和输入显示在一行中。

【问题讨论】：

请注意，如果将样式（不透明度）应用于元素，不透明度也适用于子元素
@Avinash：当我改变父母的不透明度时，它显然会改变孩子的不透明度，但之后当我改变孩子的不透明度时，它应该覆盖现有的孩子的不透明度。不是吗？
好吧，你也许是对的 :) 你页面中剩余的 div 元素呢？？您将每个 div 元素的不透明度设置为 0.5，而您只是更改了 .labelTextHolder 的不透明度，剩下的 div(parents) 怎么样？跨度>
实际上我不认为它是这样工作的。无论您喜欢与否，不透明度都会级联。孩子使用父母最终的不透明度作为它的基础。因此，如果您将父级设置为 0.5，子级设置为 0.5，则子级将看起来像 0.25

标签： jquery html css effect

【解决方案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;}

希望这会有所帮助！

【讨论】：

谢谢！真的很感激:)
真的不行，覆盖覆盖整个页面，下面是它的实际工作原理：jsfiddle.net/a8454az7

【解决方案2】：

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

两个选项：

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

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

【讨论】：