Как переключить непрозрачность элементов с помощью javascript

У меня есть div, который имеет 14 дочерних div с некоторым контентом. Теперь мне нужно, чтобы при загрузке он должен отображать все 14 div с opacity = 1, но когда я нажимаю над одним из них, непрозрачность других должна уменьшаться на 50%. Только текущий должен иметь полную непрозрачность. Аналогично, когда я перемещаю мышь поверх другого div, тогда, кроме текущего, непрозрачность других divs должна быть уменьшена на 50%.Как переключить непрозрачность элементов с помощью javascript

Как это сделать с помощью javascript, и я не хочу использовать какую-либо библиотеку (jquery).

Обновление: Получил это! :)

/*onmouseover*/ 
function showCurrentDimOthers(el) { 
     var otherElements = document.getElementById("see_all_content_holder").childNodes; 
     for (var o = 0; o < otherElements.length; o++) { 
      otherElements[o].style.opacity = 0.5; 
      otherElements[o].style.filter = 'alpha(opacity=5)'; 
     } 

     el.style.opacity = 1.0; 
     el.style.filter = 'alpha(opacity=10)'; 
    } 

/*onmouseout*/ 
function dimCurrent(el) { 
     el.style.opacity = 0.5; 
     el.style.filter = 'alpha(opacity=5)'; 

    }

источник

2012-01-23 manishekhawat

Вы даже знакомы с CSS и JavaScript? Я думаю, что jQuery - хороший выбор для новичков. – Rufus

@ По умолчанию, что я делал, было onmouseover каждого дочернего div, я вызываю функцию, которая получает все дочерние divs и устанавливает там непрозрачность 0.5, а затем устанавливаю непрозрачность текущего div, используя это ключевое слово this непрозрачность 1. Затем onmouseout я устанавливаю непрозрачность текущего div на 50%. Тем не менее, я получаю некоторые нежелательные результаты. Я обновляю вопрос с помощью своего кода. Пожалуйста, проверьте. – manishekhawat

@rufus и Jivings, спасибо за то, что помогли мне :) Я ценю это. Я думаю, что меня где-то потеряли, когда я его кодировал, это было так просто, мгновенно. – manishekhawat

Почему так сложно? Из того, что я вижу, CSS достаточно для этого:

<ul> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
    <li>D</li> 
    <li>E</li> 
</ul> 

ul:hover li { 
    opacity: 0.5; 
} 

ul li:hover { 
    opacity: 1; 
}

http://jsfiddle.net/fkAyb/

источник

2012-01-23 12:53:28 Yoshi

Отличное решение Yoshi! – Chango

Очень крутое решение! – PiTheNumber

@ Yoshi, классное решение :) Я отвечу также как правильный ответ. – manishekhawat

Вы можете изменить прозрачность таким образом:

document.getElementById('someid').style.opacity = '0.5';

Использование OnMouseOver и onmouseout событий для отдыха.

источник

2012-01-23 12:37:53 PiTheNumber

идея, которую я не пробовал:

Дайте каждому Див идентификатор, например, «div-1», «div-2»
Хранить все в массиве.
Слушайте событие onmouseover, зацикливайте массив и измените непрозрачность всех элементов, находящихся в массиве, которые отличаются от текущего идентификатора.
Слушайте onmouseout событие и вернуть все непрозрачность 1.

Если это не достаточно ясно, дайте мне знать.

источник

2012-01-23 12:49:35 Chango

Получил ваше решение, он будет работать отлично, хотя я получил свой собственный код, который я обновил в сообщении сейчас. спасибо за альтернативное решение – manishekhawat

Добро пожаловать! ^.^ – Chango

Как переключить непрозрачность элементов с помощью javascript

ответ

Смежные вопросы