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

我有3个输入框，我想调暗整个屏幕，除了被点击的特定输入框外。
我尝试这样做： http://jsbin.com/equre3/2 如何使用jQuery单击输入框来调暗其他div？

但是当我点击文本框的一切，包括文本框获得变暗。

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

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

此外，我应该在CSS中做什么更改，以便文本和输入显示在一行中。

来源

2010-09-02 Rakesh Juyal

请注意，如果你申请样式（不透明）到一个元素，不透明度也适用于子元素 – 2010-09-02 13:45:14

@Avinash：当我将改变父母的不透明性会明显改变孩子的不透明度，但在此之后，当我改变孩子的不透明度时，应该重写孩子现有的不透明度。不是吗？ – 2010-09-02 13:51:49

好吧，你也许是对的:)你的页面中剩余的'div'元素怎么样？你将每个'div'元素的不透明度设置为** 0.5 **，你只是改变了'.labelTextHolder'的不透明度，剩下的'div'（**父**）呢？ – 2010-09-02 14:12:12

好吧，这只是一个准系统的例子......我不会动画或添加任何标签或输入或任何东西......但原则上它是如何工作的。要记住操纵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"); 
    } 
); 
});

至于整个“文本和输入一行”的东西，我建议您更改输入和标签的CSS属性以显示它们的内联或内联块（如果在您的应用程序中可行）。例如：

input.rowStyle {display:inline;}

希望这有助于！

来源

2010-09-02 14:13:32 Trafalmadorian

是的！回答这个例子:) – 2010-09-03 10:18:10

谢谢！真的很感激它:) – Trafalmadorian 2010-09-03 13:50:29

并不真正的工作，覆盖覆盖整个页面，这是它的实际工作原理：https://jsfiddle.net/a8454az7/ – milan 2017-03-24 10:39:37

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

两个选项：

1，如果你的目标浏览器支持它，使用RGBA您的容器的背景。

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

来源

2010-09-02 13:01:11 Gabriel

您可以发布解决方案吗？ – 2010-09-02 13:52:10

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

回答

相关问题