大家好，感谢邀请，今天来为大家分享一下jqueryhover(jqueryhover方法)的问题，以及和的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

访问过的超链接、普通的连接、获取焦点的文本框，这些状态都可以用伪类来进行选择和表示

当我们需要为这些处在特殊状态的元素设置样式的时候，那么CSS就为这些状态提供了专门的选择器,

这些选择器就是伪类选择器!

伪类选择器有很多，而今天我要说的就是一个很经典也是很有用的一个伪类选择器:hover

:hover它表示用户通过鼠标滑过或鼠标悬停在元素上的CSS样式

通常我们都是把这个效果应用在a标签上, 也可以使用在其他元素标签上

举个栗子

效果如下

这是最简单的效果,我们平常开发也是经常会使用到的一种方式!

但这都是在控制元素本身，而:hover还可以用来控制其他元素！

我们可以根据html的结构分析判断出:hover可以用来控制子元素以及后代元素

举个栗子

如图

所以很多人没有搞明白,:hover是可以控制其他元素

但是一定要注意的是从html结构上来讲,子元素才能被控制, 只要是子元素，不管层级多少都可以被控制到!

例如

如图

所以这也证明了，如果不是父子关系那么其实:hover的实用性并不大!

因为:hover也类似于js中的onmouseover和onmouseout事件, 但我们实际开发中经常会遇到悬停在某个元素上的时候,另外一个元素也显示，并且还能移入到该元素上，那么如果不是父子关系的html结构下，使用:hover将无法实现!

所以这里我个人认为，不要在兄弟关系的情况下去使用:hover

利用父子关系的html嵌套结构我们可以结合:hover伪类实现一个简单的htm+css三级菜单效果

代码如下

效果如下

注意

虽然有些时候，我们可以使用:hover去选择兄弟关系的标签元素，但这种做法是有一定缺点的!

例如

如图

你可以使用选择器选中后面的元素，因为是递进关系, 但你不能从后面的元素选择到前面，至少目前选择器还不支持这样子做，如果你不使用js或者jquery

所以只用css应该目前是不可以的，如果可以请你在评论区告诉我! 嘿嘿~~

最后分享一个:hover布局的小技巧,我们有的时候经常在使用:hover的时候，会让元素抖动

相信很多朋友都遇到过这个问题!

举个栗子

如图

其实这个问题很简单，如果你学过盒子模型就应该知道元素的margin+border+padding+width结构

这里的情况很明显是因为border增加的元素大小，所以导致鼠标悬停上之后，加了border边框，让元素发生了抖动, 其实解决办法也有很多，这里我推荐一种就是:提前先加好一个透明边框

或者说是提前把一些要悬停显示的CSS样式先写好, 这样一来就不会发生抖动了!

代码如下

效果

30+款最新的免费jQuery CSS3图片悬停效果欣赏

Hyena v1.2

Pure CSS3 Image Hover Effects

Hover Effects Pack

Image hover effect

Hover Effects Pack – WordPress Plugin

CSS DECK

Hover Effects Pack

Hover CSS

SHAPE HOVER EFFECT WITH SVG

ANIMATED OPENING TYPE

ANIMATED OPENING TYPE

Create a Pentagon Hover Effect

CSS Powered Buttons with Hover Tooltips

KoalaZoom jQuery Plugin v1.0

Long Shadow jQuery Plugin

CSS Pricing Tables with Hover Effect

Stretch Gallery

CSS3 Image Text Hover Effects

Advanced CSS3 Hover Effects 5 w/ Banners

CSS3 – ZSquare Animated Web Profile

Captions

CSS3 Vinyl With Case and Cover

Text Revel on Hover: Corner Triangle Slide Overlay

Gallery Hover Expand

Hover Animationfrom UNIQLO

WordPress Speedo Popup – Lightbox

Flat Responsive Sliding Boxes

Social buttons with hover

CSS3 Transitions

WP Teamer

Direction-aware 3D Hover Effect

LOADING EFFECTS FOR GRID ITEMS WITH CSS ANIMATIONS

Dynamic Grid With Transitions

RESPONSIVE ICON GRID

PlayGround

Using CSS3 Animations to Build a Sleek Box UI

Sharing menus

好了，文章到这里就结束啦，如果本次分享的jqueryhover(jqueryhover方法)和问题对您有所帮助，还望关注下本站哦！

用户评论

如梦初醒

jQuery hover 真是个好东西！以前用纯javascript实现动态效果太麻烦了就一直没有玩过，这次终于学会了！现在可以用它来做超棒的视觉特效啦！感觉学习到了一个宝贵的工具。

    有10位网友表示赞同！

凉话刺骨

这篇文章讲得真清楚，把 jQuery hover 的用法解释得很透彻。我之前看过一些教程，但总觉得不够详细，像这里这样一步一步地讲解，就比较好理解。谢谢分享！

    有16位网友表示赞同！

炙年

我一直以为 jQuery hover 只适合网页元素的简单效果，没想到还能用在复杂的交互设计里！这篇博文让我开拓了视野，看来得好好学习一下。

    有19位网友表示赞同！

关于道别

我用的还是 jQuery1.X版本，不知道是不是更新到最新版后，hover方法会有变化？有人知道吗？还是说直接拿老版本的教程看就行了？

    有5位网友表示赞同！

不要冷战i

jQuery hover 的优点在于代码简写而且高效，比起传统的 javascript 来说，真是太方便了！但有时候我会觉得它的灵活性不太高，希望它能提供更多定制化的选项。

    有11位网友表示赞同！

你的眸中有星辰

最近开始学习前端开发，这篇文章刚好对我的需求很有帮助！学到的知识可以直接应用到我的项目中去，省去了很多调试时间。赞赞赞！

    有20位网友表示赞同！

减肥伤身#

说实话，我对jQuery hover的实际运用方式一直没太理解，总觉它有些鸡肋，只是能简单改变元素样式。这篇博文稍微解释了一点，但我还是想了解更多关于它的应用场景和技巧。

    有18位网友表示赞同！

信仰

这篇文章虽然讲得很全面，但是代码示例比较简单，希望能有更复杂的场景展示，比如与动画、表单交互等结合的案例，那样更容易理解和启发学习。

    有15位网友表示赞同！

经典的对白

我感觉 jQuery hover 的使用范围实在太局限了，大部分情况下用 CSS3 来实现效果会更简洁明了，而且兼容性也更好。如果非要用 jQuery hover，不如先考虑下它的性能优势是否足够抵消额外代码带来的负担。

    有10位网友表示赞同！

呆檬

这个jQuery hover方法，感觉确实方便了一些操作，可以让网页元素更加活泼。我决定趁这次好好学习一下，尝试在自己的网站上应用看看效果怎么样！

    有6位网友表示赞同！

花菲

这篇文章对 jQuery hover 的使用案例展示可以再多一些！比如结合图片、动画等效果，能更直观地帮助读者理解它的灵活运用。

    有19位网友表示赞同！

浮世繁华

jQuery hover 确实是一个好帮手，它能让 Web 开发变得更高效。这篇讲解比较客观，没有过度吹捧或者贬低，很值得参考学习。

    有17位网友表示赞同！

颜洛殇

最近在做一个网站项目，需要用到一些动态效果，jQuery hover 就正好派上用场了！看来这篇文章很有帮助，我打算好好研读一下

    有17位网友表示赞同！

揉乱头发

我之前用过 jQuery hover。但是它的语法有时挺拗口的，希望能有更直观的解释和代码示例能够让学习者更容易理解。

    有6位网友表示赞同！

青墨断笺み

jQuery hover 的应用越来越广泛了，这篇博文不仅介绍了基本用法，还探讨了一些高级技巧。对于想要深入学习它的人来说，非常实用！

    有20位网友表示赞同！

初阳

这篇文章写的比较详细，涵盖了很多关键点，但是代码注释可以多一些，这样对初学者更友好。

    有19位网友表示赞同！

孤败

jQuery hover 确实是一个方便快速的方式来实现网页元素的动态效果，但这并不代表它适合所有情况，有时候直接用 CSS3更简单高效。选择合适的方案才是最重要的！

    有20位网友表示赞同！

爱情的过失

学习过程中还是需要多动手实践，这篇博文可以作为一份很好的理论基础，希望大家在实际应用中也能灵活运用 jQuery hover 的威力！

    有11位网友表示赞同！