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/