jquery中的hover() 方法运用以及扩展。

最新推荐文章于 2021-09-07 13:18:56 发布

原创最新推荐文章于 2021-09-07 13:18:56 发布 · 640 阅读

0 ·

CC 4.0 BY-SA版权

js基础专栏收录该内容

22 篇文章

订阅专栏

在修改PHP项目页面样式时，遇到无法直接编辑压缩后的CSS文件中的:hover伪类问题。通过jQuery的hover方法成功覆盖CSS的:hover效果，实现对页面元素状态变化的样式修改。

今天在改公司项目的时候遇到一个特别棘手的问题。
项目是php项目。以前没怎么遇到过PHP，还好，php并不是那么难。遇到的具体问题是：
有一个页面样式需要做修改，这个页面的css全是外联，css都是经过压缩处理的，我需要做的就是把css解压缩修改再次压缩，然后看页面修改的效果。按照这个套路我把所有的样式改完了，最后有个：hover我不知道为什么在css里一直找不到，但又必须做修改。索性项目的js库是jQuery，看了一下jQuery中也有个hover方法。我找到元素直接用hover（）。很神奇，jQuery居然直接覆盖了css的：hover。我的问题得以解决。

 $('#users-table').hover(()=>{
            $('tbody tr').css("background-color","#0d2636")
        },()=>{
            $('tbody tr').css("background-color","#0d2636")
        })

hover（）会执行两个function,第一个是你的鼠标悬浮上去，第二个是你的鼠标移开元素。这两个function会分别触发 mouseenter 和 mouseleave 事件。
如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。