jQuery中的mouseover和mouseout的hide和show事件的本质

   当鼠标悬停在标上时,下面的文字将会隐藏,将鼠标移开,下面的文本内容又会出现?

   作为刚入门的小毛毛虫很好奇其内部到底是怎样改变的。

   jQuery代码:

HTML代码:

JQuery

jQuery的特点:轻量级、强大的选择器、出色的DOM操作的封装、可靠的事件处理机制、完善的Ajax....

  当你将鼠标悬浮在JQuery上时,下面的文本信息会消失,鼠标移开后,文本信息又出现。

  我利用chrome的开发工具去查看了代码是否有变化:

  发现一开始没有进行任何操作时,代码还是一成不变,当你将鼠标悬浮在JQuery上时,代码如下图所示:

jQuery中的mouseover和mouseout的hide和show事件的本质_第1张图片

  可以看到在

这一行中多了style属性,且属性值display值显示为none;当移开鼠标时,属性值显示为:block。   如下图代码所示:

jQuery中的mouseover和mouseout的hide和show事件的本质_第2张图片

 

你可能感兴趣的:(jQuery中的mouseover和mouseout的hide和show事件的本质)