7

我想查看分配给特定元素的 CSS 过渡或 JavaScript/jQuery 动画。我应该如何在 Chrome DevTools 或任何其他开发人员工具中执行此操作？

例如，我访问了一个 Google plus 页面，我注意到当我将鼠标悬停在一张图片上时，它会变灰、放大并在角落出现一个关闭按钮。

正常：

正常状态

悬停：

悬停在状态

如何查看此行为背后的代码？

4

4 回答 4

3

右键单击元素选项卡中的 html 元素并选择 :hover 选项。现在您可以在右侧样式选项卡中看到应用于特定元素的悬停 css。请参考屏幕截图

在此处输入图像描述

于 2016-08-23T08:11:10.967 回答
2

对于 css 过渡，使用 chrome 开发工具时很容易发现。只需右键单击要查看的动画即可调出检查器。将元素的状态更改为悬停，您可以查看悬停元素的所有 css。

对于 javascript，您可以使用 chrome 开发工具中的“资源”选项卡来查看触发的脚本。只需通过它。

为了您的效果..它最有可能是Javascript。

于 2013-04-12T09:12:33.170 回答
1

他们将注册一个悬停事件。可以通过各种方法添加悬停事件

  1. 在 CSS 中

    #someId:hover
{
 color:red;
}

  2. 在jQuery中。$('#someid').hover();

  3. 通过不显眼的 jquery。他们将以不显眼的方式附加事件

现在检查此方法的视图源。一些他们将附加事件的地方。

于 2013-04-12T09:10:37.560 回答
1

据我所知，JavaScript 没有简单的方法，但是当我在 Chrome 中处理 css 时，以下是我最喜欢的答案和方法。你可以强制状态和检查悬停 css 等。

https://stackoverflow.com/a/6778547/941896

于 2014-02-23T23:12:37.883 回答