Question

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

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

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

它的工作方式（截至目前，因为它没有考虑当前按钮处于不透明度1.0），我正在盘旋的任何按钮应该将其不透明度逐渐变为0.6，即使是所选的（我也需要以某种方式修复）。

我一直盯着这个很长一段时间而没有找到解决方案。

如何进行完全固定的版本，其中未选择的按钮（不透明度！= 1.0）将淡化为不透明度0.6 on：hover，淡入1.0不透明度：点击，当前选择的按钮不受影响通过：悬停？

这是具体的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中的不透明度（作为style的{{1}}属性）覆盖悬停状态。

我不是强制使用javascript中的不透明度，而是使用类名，只需根据需要添加或删除它们，让CSS理清不透明度：

img

和

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

以下是代码更改的JSfiddle。

请注意，因为当您选择它时，您将悬停在活动的一个上，它只会淡入0.6不透明度，然后在您取消它时淡入1.0。

如果这是一个问题，你最初可以添加一个额外的类，强制选择1.0不透明度，然后设置一个js监听器，以便在第一次取消它时删除该类。

此外，我的版本使用HTML5 classList API，因此不支持：http://caniuse.com/classlist。虽然为了更好的浏览器支持，将其切换到.station-button.active { opacity: 1; } .station-button:hover { opacity:0.6; }非常容易。

CSS图像不透明淡化具有多个元素的转换（类）

1 个答案: