如何使用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？

回答

相關問題