javascript - jQuery 过渡？

Question

我想使用 jquery 访问 li 元素上的悬停状态。在悬停在它上面之前，它是灰色的。当您将鼠标悬停在它上面时，它会变成红色并带有下划线。您可以在 css 中执行此操作，但诀窍是我希望它从 li 的左侧过渡到右侧，因此它看起来像是在滑动颜色。

score 1 · Accepted Answer

如果您正在谈论为 li 的下划线设置动画：

创建一个细的（2px 高，li 的宽度）红色 div，其中包含一个细（相同大小）的白色 div。您应该只能看到白色，完全覆盖红色 div。

确保红色 div 具有溢出：隐藏为 css 属性。然后做一个 jQuery 动画，将白色的 div 向右移动，创建一条红线慢慢地在 li 下划线的错觉。当有人将鼠标悬停在任何 li 上时，找到最近的“红/白”嵌套 div 并在白色 div 上执行动画。有点像这样：

$("li").hover(function(){
    $(this).next('div').children('div').animate({left: (width of div)px});
});

next('div') 找到红色 div，然后 children('div') 在其中找到白色 div。animate 函数将白色 div 移开，露出红色 div。

score 0 · Accepted Answer

最好在 li 维度中具有所需颜色的背景图像。这样就可以在mouseover 和mouseout 事件li 时制作动画效果。在鼠标悬停时，将背景图像从一些“-”的背景位置设置为 0，而在鼠标移出时则相反。

score 0 · Accepted Answer

你试过这个例子吗：

3 回答 3