Javascript 具有多个元素的CSS图像不透明度淡入淡出过渡（类）

参考：

我有一堆图像作为按钮，它们当前的不透明度更改为：悬停。这是褪色使用CSS转换（我只有它设置为webkit浏览器的测试目的）。当页面第一次加载时，一切都按预期进行，您可以将鼠标悬停在图像上，图像的不透明度逐渐增加，反之亦然

当我点击一个图像时，我调用一个函数（如下），该函数将所有图像按钮（class.station按钮）的不透明度设置回正常值，然后将所选按钮的不透明度增加到1.0（100%）。一旦发生这种情况，其他按钮的悬停效果将不再起作用（出于某种原因，选定按钮也不起作用）。单击另一个按钮时，转换仍然有效，但悬停效果完全停止工作

它的工作方式是（从现在开始，因为它没有考虑当前按钮的不透明度为1.0），我悬停在上面的任何按钮的不透明度都应该逐渐更改为0.6，即使是选定的按钮（我也需要以某种方式修复）

我盯着这个问题看了很长时间，没有找到解决办法

我该如何做完全固定的版本，其中未选择的按钮（不透明度！=1.0）将在：hover时淡入不透明度0.6，在：click时淡入不透明度1.0，并且当前选择的按钮将不受on:hover的影响

下面是具体的css和js

CSS:

JS:

功能转换站（stationid）{
mystation=document.getElementById（stationid）；
allofclass=document.getElementsByClassName（“站点按钮”）；
对于（i=0；i

您正在强制javascript中的不透明度（作为

img

的

样式

属性），该属性覆盖悬停状态

我不会在javascript中强制使用不透明性，而是使用类名，根据需要添加或删除它们，让CSS对不透明性进行排序：

function changestation(stationid) {
    mystation = document.getElementById(stationid);
    allofclass = document.getElementsByClassName("station-button");
    for (i = 0; i < allofclass.length; i++) {
        allofclass[i].classList.remove('active');
    }
    mystation.classList.add('active');
    currentstation = stationid;
    loadnext();
}

下面是一个关于上述代码更改的示例

请注意，由于您在选择活动对象时将鼠标悬停在该对象上，因此该对象的不透明度将仅淡入0.6，然后在取消选中该对象时淡入1.0

如果这是一个问题，您可以首先添加一个额外的类，强制选择1.0不透明度，然后设置一个js侦听器，在第一次未覆盖该类时将其删除

---

另外，我的版本使用了HTML5类列表API，所以不太支持：。为了更好地支持浏览器，将其切换到

className

将非常容易。

您反对jQuery吗？我知道javascript精英会因为我问这个问题而讨厌我，但jQuery用更少更简单的代码处理动画。除非你在一个页面上有数百个这样的东西，否则你似乎不会有任何性能问题。loadnext（）是什么？你有什么错误吗？ntgCleaner：出于技术原因，这个项目需要纯js。我知道jQuery和其他库已经内置了元素选择、跨浏览器转换和回退等功能，但正如我所说。。。raam86:loadnext（）处理音频播放和加载，它与UI完全分离。页面上没有任何错误，js等等。是的，我也这么认为。但正如您所期望的，我需要将活动的始终强制为1.0不透明度。我只是觉得奇怪，使用简单的js/css没有简单的方法来实现这一点。多个类和事件侦听器，对于这样一个“简单”的任务来说就这么多了。如果你只需要活动的一个始终为1.0，不管它是否悬停（这在原始帖子中不是很清楚），你可以通过添加

.station按钮来强制使用CSS。活动：悬停

-这里有一个更新的提琴：。

function changestation(stationid) {
  mystation = document.getElementById(stationid);
  allofclass = document.getElementsByClassName("station-button");
  for (i = 0; i < allofclass.length; i++) allofclass[i].style.opacity = 0.3;
  mystation.style.opacity = 1.0;
  currentstation = stationid;
  loadnext();
}

function changestation(stationid) {
    mystation = document.getElementById(stationid);
    allofclass = document.getElementsByClassName("station-button");
    for (i = 0; i < allofclass.length; i++) {
        allofclass[i].classList.remove('active');
    }
    mystation.classList.add('active');
    currentstation = stationid;
    loadnext();
}

.station-button.active {
    opacity: 1;
}

.station-button:hover {
    opacity:0.6;
}