如何检查HTML元素的动画？

Question

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

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

正常:

悬停:

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

Answer 1

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

Answer 2

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

1. 在CSS中

   #someId:hover
   {
    color:red;
   }
   

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

3. 通过不显眼的 jquery。他们会以不引人注目的方式附加事件

现在检查此方法的查看源。有些地方他们会附加事件。