使用 mootools 悬停时覆盖文本

Question

我想在 a>img 上添加动画文本叠加层，并带有一些简单的效果，例如淡入淡出或动画入/出。

有谁知道已经这样做的插件，或者可以建议我应该查看的 mootools 功能？

Answer 1

您需要将以下伪代码翻译成 Mootools：-

1. 编写一个函数，使用new Element() 函数在给定元素内创建一个新的<div> 元素。除了父元素之外，<div> 的内容还将在函数参数中传递。
2. 将mouseenter 事件添加到您要处理的<a> 标记中，该标记会触发上述函数并将自身作为父元素传递。您可以将父标签 <a> 的 rel 属性设置为子标签 <div> 的内容，以使该插件真正动态化。
3. 创建一个slideOut() 函数，该函数接受一个元素，查找父元素的尺寸并执行滑动动画以将元素移动到父元素边界之外。确保在父元素 CSS 上设置了 overflow:hidden;。
4. 将 mouseout 事件添加到运行 slideOut() 函数并将子 <div> 作为参数传递的 <a> 标记。

应该可以的。