javascript - 伪类悬停在 JavaScript ImageSwap 中不起作用

Question

专家；

我有一个照片修饰作品集页面，其中缩略图替换了主查看器图像。主查看器图像是一个具有前后部分的 Sprite ，显示了修饰前和修饰后的原始图像。 Sprite 作为背景图像加载到主查看器 div 中，设置为在鼠标悬停时重新定位以显示 Sprite 的前后部分。

当页面最初加载时，主查看器会正常运行，在悬停时显示前后位置变化。但是一旦通过缩略图选择将新图像加载到查看器中，悬停操作就会停止工作。我已经处理了几个小时，但无法解决问题。

可以在此处看到主查看器 Sprite 的示例: http://www.triadimedia.com/frame_01.jpg .所有样式和脚本都包含在页面中，它在这里: http://www.triadimedia.com/pfolio_photo_retouch.php .

如有任何帮助，我们将不胜感激。

谢谢。

凯西

Answer 1

更改您的拇指以使用此代码:

<a onclick="javascript:thumb_swap(1);"></a>
<a onclick="javascript:thumb_swap(2);"></a>

等...

然后用这个替换你当前所有的 JS 函数:

function thumb_swap(num) {
    if(num<10) num = "0"+num;
    var el = document.getElementById('viewer');
    var styles = getComputedStyle(el,null);
    var bgurl = styles.backgroundImage;
    bgurl = bgurl.replace(/_[0-9]+\.jpg/,'_'+num+'.jpg');
    document.getElementById('viewer').style.backgroundImage = bgurl;
}

无论如何在快速测试中为我工作。