这个网站如何做悬停效果?

时间:2010-08-23 11:09:22

标签: css hover

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

2 个答案:

答案 0 :(得分:1)

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

您可以在此处看到重叠的图片:http://shaiya.aeriagames.com/themes/shaiya/images/site/page-header-light-hovers.jpg

答案 1 :(得分:0)

这是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 lirary。