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

How to toggle the opacity of Elements using javascript

本文关键字：元素 不透明度 何使用 javascript      更新时间：2023-09-26

我有一个div，它有14个子div和一些内容。现在我需要的是，在加载时，它应该显示不透明度为1的所有14个div，但当我将鼠标悬停在其中一个div上时，其他div的不透明度应该降低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)';
    }

为什么这么复杂？据我所见，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/

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

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

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

一个我没有尝试过的想法：

  1. 给每个div一个id，例如"div-1"、"div-2"
  2. 将它们全部存储在一个数组中
  3. 监听onmouseover事件，循环数组并更改数组中与当前Id不同的所有元素的不透明度
  4. 监听onmouseout事件并将所有不透明度恢复为1

如果还不够清楚，请告诉我。

相关文章：