4

3 つの入力ボックスがあり、クリックされている特定の入力ボックスを除いて画面全体を暗くしたいと考えています。
私はこれを試しました： http://jsbin.com/equre3/2

しかし、テキストボックスをクリックすると、テキストボックスを含むすべてが淡色表示になります。

テキストボックスをクリックすると、これが必要なものです。 

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

また、テキストと入力が 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");
    }
  );
});​

「1行のテキストと入力」全体についてはdisplay、アプリケーション内で実行可能な場合は、入力とラベルのCSSプロパティを変更して、インラインまたはインラインブロックで表示することをお勧めします。例：

input.rowStyle {display:inline;}

お役に立てれば！

</ p>

于 2010-09-02T14:13:32.963 に答える
2

要素の不透明度を変更すると、すべての子が同じ不透明度になります。

2 つのオプション:

1- 対象のブラウザーがサポートしている場合は、コンテナーの背景に rgba を使用します。

2-絶対配置を使用して要素を再配置し、コンテンツがコンテナーの子ではなく、その上に配置されるようにします。

于 2010-09-02T13:01:11.420 に答える