jQuery中的hover事件

在我们之前学习前端的过程中了解到了很多代码的作用，特别是js中所使用的方法，我之前也介绍过很多实用的js方法，今天要给大家介绍的是jQuery中的一个比较特殊的一个方法：hover()。
先前说过，我们在编程的时候最不想看到的结果是方法效果实现了，但是代码量却出乎意料的繁杂、量大，所以在写代码的时候通常会使用一些插件或者是特殊方法尽量简写代码，而jQuery就是用于书写方便，简写代码的插件。尽管使用插件也会存在代码重复的问题。
下面我用一个例子进行讲解：

上述内容是一个简单的布局，首先“ContBox”元素盒子默认为隐藏状态，我们想实现的效果是移入展开盒子的按钮能够将盒子显示出来移出隐藏，同时鼠标在盒子上时盒子也不会消失：

同时获取到按钮和盒子两个元素的ID給它们一个鼠标移入事件，当鼠标移入进去后给盒子添加一个显示元素的类（不是这个类就能隐藏，这是使用css插件后插件内设置的属性），再选择到两个元素的ID给它们一个鼠标移出事件，当鼠标移出之后去除掉这个显示元素的类。
完成后运行实现效果，确实完成了之前所需要的操作结果，当鼠标没有移入的时候是这样的，当鼠标移入后则显示出了盒子，同时鼠标在盒子上时盒子依旧存在。

到这里我们所需要的效果实现了，但是js代码就感觉有点多了，虽然已经时简写过了，但看上去写法比较简单，直接通过事件实现的每一个效果，应该还可以简化，那么这时候就可以用到今天所介绍的这个特殊方法了。
hover([over,]out)方法故名思意，就是一个伪类，不过是一个特殊的伪类，它可以同时实现移入移出的一个方法，它本身包含了两种方法，做出第一个动作会触发第一个方法，第二个动作会实现第二个方法，虽然它仅仅只是移入移出，不过方法体却是可以随心所欲的写（不逾矩）。
那么下面我们将之前的那个js代码转换一下用hover()方法来写，看一下所实现的效果是否和之前实现效果是一样的：

选择到两个元素的ID，给它们一个hover事件，在事件内两个方法中分别写出所需实现的方法体即可。然后我们更改一下按钮名字后再次运行，当鼠标移入移出按钮和在显示后的盒子上时盒子效果依旧没变：

所实现的效果与之前完全一样，通过对比发现，使用hover()方法来实现的这个效果的代码比传统的移入移出方法实现效果的代码要少一点，而且总体看上去逻辑思维比较清晰，没有之前的那种繁杂的代码样式。