如何使用JavaScript切换元素的不透明度

Question

I have a div which has 14 child divs with some content. Now what I need is that, onload it should display all the 14 divs with opacity = 1, but when I mouse over one of them, the opacity of others should reduce by 50%. Only the current one should have the full opacity. Similarly when I move my mouse over another div now, then except the current one, opacity of other divs should be reduced by 50%.

How can I do so using javascript and I don't want to use any library (jquery).

Update : Got it working! :)

/*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)';

    }

Answer 1

Why so complicated? From what I see, CSS is enough for this:

<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/

Answer 2

You can change the opacity this way:

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

Use onmouseover and onmouseout events for the rest.

Answer 3

An idea I didn't try:

1. Give each div an id, eg "div-1", "div-2"
2. Store all of them in an array.
3. Listen to onmouseover event, loop the array and change the opacity of all the elements that are in the array that are different to the current Id.
4. Listen to onmouseout event and revert all the opacity to 1.

If it's not clear enough let me know.