首页 文章

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

提问于
浏览
1

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

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

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

它的工作方式(截至目前为止,因为它没有考虑当前按钮处于不透明度1.0),是我悬停的任何按钮应该将其不透明度逐渐变为0.6,即使选中一个(我也需要以某种方式修复) .

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

如何进行完全固定的版本,其中未选择的按钮(不透明度!= 1.0)将淡化为不透明度0.6 on:hover,淡入淡出到1.0不透明度:单击,并且当前选择的将不受on 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();
}

1 回答

  • 0

    您正在强制javascript中的不透明度(作为 imgstyle 属性)覆盖悬停状态 .

    我不是强制使用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 将非常容易 .

相关问题