javascript - 具有多个元素的 CSS 图像不透明度淡入淡出过渡(类)

Question

引用:http://www.sanandreasradio.com

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

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

它的工作方式(截至目前，因为它没有考虑不透明度为 1.0 的当前按钮)，我悬停在上面的任何按钮都应该将其不透明度逐渐更改为 0.6，即使是选定的(我也需要以某种方式修复)。

我一直盯着这个看很久都没有找到解决办法。

我如何着手制作完全固定的版本，其中未选择的按钮(不透明度!=1.0)将在悬停时淡化为不透明度 0.6，并在:单击时淡化为不透明度 1.0，并且当前选定的按钮不受影响通过 on:hover?

这里是具体的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 将非常容易。