CSS图像不透明度渐变与多个元素(类)

Question

参考：http://www.sanandreasradio.com

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

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

它的工作方式（到目前为止，因为它没有考虑到不透明度为1.0的当前按钮）是，我悬停的任何按钮的不透明度都应该逐渐变为0.6，即使是选定的按钮（我也需要以某种方式修复）。

我已经盯着这个问题看了很长时间，却没有找到解决方案。

我该如何做完全固定的版本，其中未选择的按钮（不透明度！=1.0）将在：悬停时淡出到不透明度0.6，在：单击时淡出到透明度1.0，并且当前选择的按钮将不受on：悬停的影响？

下面是具体的css和js。

CSS：

.station-button {
  opacity:0.3;
  cursor:pointer;
  width:120px;
  height:120px;
  -webkit-transition:opacity .3s;
  -webkit-transition-timing-function:ease;
}
.station-button:hover {
  opacity:0.6;
}

JS:

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();
}

Answer 1

您正在强制javascript中的不透明度（作为img的style属性），这将覆盖悬停状态。

我不会在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();
}

和

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

下面是一个JSfiddle，它对上面的代码进行了修改。

注意，因为当你选择它时，你将鼠标悬停在活动的一个上，它只会褪色到0.6的不透明度，然后当你取消覆盖它时，它会褪色到1.0

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

此外，我的版本使用HTML5 classList API，因此不太支持：http://caniuse.com/classlist.为了更好地支持浏览器，将其切换到className将非常容易。