这个网站的悬停效果是怎么实现的?

发布于 2024-09-15 22:44:29 字数 155 浏览 3 评论 0原文

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

Please look at http://shaiya.aeriagames.com/ and tell me how they do their hover effects on the logo as it is not javascript and works in all browsers

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

一场春暖 2024-09-22 22:44:29

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

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

It does use Javascript. If you use Firebug and look at the image you can clearly see that another image is been overlaid above the original image with the CSS opacity property. Both images are attached as background images to two different elements. When you hover over the parent, the li with the id gameLogo, its child an anchor's opacity starts to increase from 0 to 1, thus causing the glow to 'appear', as both images are perfectly aligned.

You can see the overlaid image here: http://shaiya.aeriagames.com/themes/shaiya/images/site/page-header-light-hovers.jpg

¢好甜 2024-09-22 22:44:29

它是 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图书馆。

It's javascript - using the mootools library.
View the source of the page, and you will see near the bottom, theres this bit of code

<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 is the script that implements the functionality, where http://s.aeriagames.com/modules/js/mootools-1.2.4-core.js is the mootools lirary.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文