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

【问题标题】：How to toggle the opacity of Elements using javascript如何使用javascript切换元素的不透明度
【发布时间】：2012-01-23 21:42:26
【问题描述】：

我有一个 div，它有 14 个包含一些内容的子 div。现在我需要的是，onload 它应该显示所有 14 个不透明度 = 1 的 div，但是当我将鼠标悬停在其中一个上时，其他的不透明度应该降低 50%。只有当前的应该具有完全的不透明度。同样，当我现在将鼠标移到另一个 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和javascript吗？我觉得jQuery对于初学者来说是个不错的选择。
@Jivings，我所做的是，每个子 div 的鼠标悬停，我正在调用一个函数，该函数获取所有子 div 并将不透明度设置为 0.5，然后设置当前 div 的不透明度使用“this”关键字将不透明度设置为 1。然后 onmouseout 我将当前 div 的不透明度设置为 50%。我仍然得到一些不希望的结果。我正在用我的代码更新问题。请检查。
@rufus 和 Jivings，感谢您努力帮助我 :) 我很感激。我想，我在编写代码时迷路了，它是如此简单，一眨眼就搞定了。

标签： javascript css opacity

【解决方案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/

【讨论】：

@Yoshi，很酷的解决方案 :) 我会将您的答案也标记为正确答案。

【解决方案2】：

你可以这样改变不透明度：

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

其余的使用 onmouseover 和 onmouseout 事件。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

得到了你的解决方案，它也可以完美地工作，虽然我有自己的代码工作，我现在已经在帖子中更新了。感谢您的替代解决方案