1

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

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

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

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

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

我该如何做完全固定的版本，其中未选择的按钮（不透明度！= 1.0）将在：悬停时淡入不透明度0.6，并在：点击时淡入不透明度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();
}
4

1 回答 1

0

您正在强制覆盖悬停状态的 javascript 中的不透明度（作为 的style属性）。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();
}

和

.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为了更好的浏览器支持，将它切换到它会很容易。

于 2013-07-03T23:48:16.060 回答