How to dim another div when pressing input window using jQuery?

Question

I have 3 input windows, and I would like to reduce the entire screen, except for the specific input window that is clicked.
I tried this: http://jsbin.com/equre3/2

But when I click on the text box, everything, including the text box, becomes dim.

In the text box, click, this is what I need.

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

Also, what changes should I make in CSS so that the text and input appear on the same line.

Answer 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");
    }
  );
});​

, CSS display , , . :

input.rowStyle {display:inline;}

, !

Answer 2

.

:

1- , rgba .

2- , , , .