代码之家 › 专栏 › 技术社区 › Hailwood

这个网站是如何实现悬停效果的?

hover css

Hailwood · 技术社区 · 14 年前

请看 http://shaiya.aeriagames.com/ 告诉我他们是如何在logo上实现悬停效果的,因为它不是javascript,在所有浏览器中都可以工作

2 回复 | 直到 14 年前

Yi Jiang 14 年前

它做 opacity 财产。两个图像都作为背景图像附加到两个不同的元素上。当您将鼠标悬停在父对象上时 li gameLogo ,其子对象anchor的不透明度开始从0增加到1,从而导致光晕“出现”,因为两个图像完全对齐。

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

Daniel Smith 14 年前

它是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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前