-2

目前正在创建一些东西，我正在插入鼠标动画。我一开始是用 jQuery 做的，但过了一分钟，我觉得用 CSS 做起来会更容易。最后，它只是一个悬停动画。

那时，我想知道：“我可以使用 jQuery 悬停动画 ( mouseenter(); mouseleave() ) 以及 CSS:hover.. 用法差异在哪里？”

这就是我的问题。

我唯一能想到的情况是，当鼠标离开时，悬停在项目上的状态应该与原始状态不同。例如“已经看过”的功能。IE

Regular: opacity:80;
:hover opacity:100;
mouseleave opacity:10.

谁能回答这个问题？

谢谢！

4

4 回答 4

2

比较简单：如果你需要做 CSS 无法解决的动作，就使用 JS。

此类行动可能是：

  • AJAX

  • 计算

  • 完全改变 DOM 中的其他元素

  • ...

这个列表可以永远持续下去。

需要注意的一个例外是，如果您想实现浏览器兼容性（如果您的特定 CSS 属性不受所有浏览器版本的支持），则可以使用 JS。

于 2013-10-14T22:04:58.410 回答
1

mouseover并且mouseout是可以由 jQuery 处理的 DOM 鼠标事件。jQuery 也有可以修改元素样式的方法——即jQuery.css(). 这很明显。

当然，:hover在您的情况下，CSS 更高效、更简单。

鼠标事件的组合，并且jQuery.css()只是 jQuery 使用的一个特定案例，其评估结果与 CSS 相同:hover。与正方形相同的是矩形的特定情况。

于 2013-10-14T22:07:33.980 回答
1

虽然我基于意见投票关闭，但我建议当悬停项目应该影响祖先元素的兄弟姐妹或悬停项目的先前兄弟姐妹的更改时，需要使用 JavaScript。

如果用例只是临时以不同的方式呈现悬停项目，请坚持使用 CSS（它更容易，浏览器可以优化）；如果意图是改变或改变其他元素，那么 JavaScript（或其库之一）是必要的。

于 2013-10-14T22:04:13.333 回答
1

一般来说，只要可行，我会建议首选 CSS 解决方案，因为浏览器可能会对其进行优化。仅在 CSS 不可行的情况下使用 JavaScript/jQuery 解决方案（因为您需要做一些您在 CSS 中做不到的事情，因为您需要支持无法:hover正确处理的旧浏览器，例如 IE7 等）。

于 2013-10-14T22:05:16.647 回答