这个网站如何做悬停效果？答案

【问题标题】：how does this site do the hover effects?这个网站如何做悬停效果？
【发布时间】：2010-08-23 19:17:33
【问题描述】：

请查看http://shaiya.aeriagames.com/ 并告诉我他们如何对徽标进行悬停效果，因为它不是 javascript 并且适用于所有浏览器

【问题讨论】：

我试过了，还是不行

【解决方案1】：

它确实使用Javascript。如果您使用 Firebug 并查看该图像，您可以清楚地看到另一个图像覆盖在具有 CSS opacity 属性的原始图像之上。两个图像都作为背景图像附加到两个不同的元素。当您将鼠标悬停在父级 li 上，id 为 gameLogo 时，其子级锚点的不透明度开始从 0 增加到 1，从而导致发光“出现”，因为两个图像完全对齐。

您可以在此处查看叠加的图像：http://shaiya.aeriagames.com/themes/shaiya/images/site/page-header-light-hovers.jpg

【讨论】：

【解决方案2】：

它是 javascript - 使用 mootools 库。查看页面的源代码，你会看到在底部附近，有这段代码

<script type="text/javascript" src="http://s.aeriagames.com/modules/js/mootools-1.2.4-core.js"></script>...<script type="text/javascript" src="http://s.aeriagames.com/themes/shaiya/js/page.js"></script>

http://s.aeriagames.com/themes/shaiya/js/page.js 是实现该功能的脚本，其中http://s.aeriagames.com/modules/js/mootools-1.2.4-core.js 是 mootools 库。

【讨论】：