Question

我有一个div有14个子div和一些内容。现在我需要的是，onload它应该显示所有14个div，opacity = 1，但当我鼠标悬停在其中一个上时，其他人的不透明度应减少50％。只有当前的应该具有完全不透明度。类似地，当我现在将鼠标移动到另一个div上时，除了当前的div之外，其他div的不透明度应该减少50％。

我怎么能用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)';

    }

Answer 1

为什么这么复杂？从我看来，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/

Answer 2

您可以通过这种方式更改不透明度：

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

其余部分使用onmouseover和onmouseout事件。

Answer 3

我没有尝试的想法：

给每个div一个id，例如“div-1”，“div-2”
将所有这些文件存储在一个数组中。
收听onmouseover事件，循环数组并更改数组中与当前Id不同的所有元素的不透明度。
收听onmouseout事件并将所有不透明度恢复为1.

如果不够清楚请告诉我。

如何使用javascript切换Elements的不透明度

3 个答案: