Как затемнить другой div при нажатии на поле ввода, используя jQuery? - PullRequest
Новая
       3

Как затемнить другой div при нажатии на поле ввода, используя jQuery?

3 голосов
/ 02 сентября 2010

У меня 3 поля ввода, и я хотел бы затемнить весь экран, кроме определенного поля ввода, по которому щелкали.
Я попробовал это: http://jsbin.com/equre3/2

Но когда я нажимаютекстовое поле все, включая текстовое поле, затемнено.

В текстовом поле нажмите, это то, что мне нужно.

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

Кроме того, какие изменения я должен сделать в CSS, чтобы текст и ввод отображались в одной строке.

Ответы [ 2 ]

8 голосов
/ 02 сентября 2010

Хорошо, это всего лишь простой пример ... Я не собираюсь его анимировать, добавлять метки, входные данные или что-то еще ... но вот как это работает в принципе.Самое важное, что следует помнить при манипулировании свойством CSS z-index, - это то, что любой элемент с z-индексом ДОЛЖЕН быть позиционирован (т.е. 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-свойств входных данных и меток, чтобы они отображались как inline или inline-block, если это возможно в вашем приложении.Пример: 

input.rowStyle {display:inline;}

Надеюсь, это поможет!

2 голосов
/ 02 сентября 2010

Когда вы изменяете непрозрачность элемента, все дочерние элементы получают одинаковую непрозрачность.

Два варианта:

1 - если ваши целевые браузеры поддерживают это, используйте rgba для фона вашего контейнера.

2 - используйте абсолютное позиционирование, чтобы изменить порядок элементов, чтобы ваш контент не являлся дочерним элементом вашего контейнера, а располагался над ним.

...