参考: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 回答
您正在强制javascript中的不透明度(作为
img
的style
属性)覆盖悬停状态 .我不是强制使用javascript中的不透明度,而是使用类名,只需根据需要添加或删除它们,让CSS理清不透明度:
和
这是一个JSfiddle,代码更改如上 .
请注意,因为您在选择它时将鼠标悬停在活动状态上,它只会淡入0.6不透明度,然后在取消悬停时淡入1.0 .
如果这是一个问题,你最初可以添加一个额外的类,强制选择1.0不透明度,然后设置一个js监听器,以在第一次取消它时删除该类 .
此外,我的版本使用HTML5 classList API,因此不太支持:http://caniuse.com/classlist . 虽然为了更好的浏览器支持,将它切换到
className
将非常容易 .