4

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

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

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

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

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

4

2 回答 2

9

好的，这只是一个准系统示例...我不会对其进行动画处理或添加任何标签或输入或任何内容...但原则上它是这样工作的。关于操作 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;}

希望这可以帮助！

​</p>

于 2010-09-02T14:13:32.963 回答
2

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

两种选择：

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

2-使用绝对定位来重新排列你的元素，这样你的内容就不是你容器的子元素，而是位于它之上。

于 2010-09-02T13:01:11.420 回答