我应该使用:hover CSS伪类还是hover() jQuery方法？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

使用jQuery中hover事件时遇到的一个小问题

在jQuery中有一个hover()方法，它可以实现模拟css中：hover这个伪类的效果。...css伪类写法如下： css"> a:hover{ color: #ccc; } jQuery中hover()方法如下...搜索官方jQuery文档中hover()方法的说明我们就会发现，其实这是jQuery中hover()内置方法的问题。...}) 当然，像这些效果的话，其实也有很多别的方法可以完成的，比如我们也可以使用jQuery中的一些其他鼠标事件（例如：onmouseover、onmouseout、onmouseenter...、onmouseleave等）来实现，没必要一味地使用hover()来进行事件的编写。

2.5K2 0

能用CSS实现的就不用麻烦JavaScript

随着scroll-behavior属性的新增，我们可以使用一行CSS代码来处理网站上的平滑滚动！浏览器支持约为75％，兼容性还是挺不错的。...动画曾经某个时期，大多数开发者使用 JavaScript(或者jQuery) 给浏览器中的元素添加动画。...Flash 被抛弃，有天赋的动画开发者使用 HTML5 去实现过去从未实现的效果。他们需要更好的工具去开发复杂的动画序列并获得最好的性能。JavaScript(或者jQuery) 并不能够做到。...:required 伪类指定具有required 属性的表单元素 :valid 伪类指定一个通过匹配正确的所要求的表单元素 :invalid 伪类指定一个不匹配指定要求的表单元素 [屏幕录制2021...但是实际情况下会有意外发生，那就是在移动端iphone上面，触摸会触发CSS的hover，并且这个的触发会很高概率地先于touchstart事件，在这个事件里面会判断当前是显示还是隐藏的状态，由于css

1.9K1 1

您找到你想要的搜索结果了吗？

是的

没有找到

【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )

选定链接样式 : 按下鼠标松开时 , 变成该样式 ; a:active 链接伪类选择器语法 : a:link { 属性名称:属性值; } a:visited { 属性名称:属性值; } a:hover...{ 属性名称:属性值; } a:active { 属性名称:属性值; } 2、常用方式注意 : 顺序必须严格遵守 LVHA 次序 : 使用链接伪类选择器时 , 四种选择器必须按照上述顺序 ,..., 则需要使用后代选择器 + 链接伪类选择器进行指定 ; a:link 链接伪类选择器不常用 , 设置 a 标签样式等同于 a:link 样式效果 ; /* a 标签选择器同时设置的样式等同于...a:link 链接伪类选择器 */ .nav a { color: gray; } /* :hover 链接伪类选择器鼠标经过变成红色 */ .nav a:hover {...color: red; } CSS 基础选择器 : 标签选择器类选择器 ID 选择器通配符选择器 3、代码示例代码示例 : <!

1.6K2 0

「jQuery」基础 - 01

注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。 jQuery对象和DOM对象 1.2.6....因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。...jQuery 样式操作 jQuery中常用的样式操作有两种：css() 和设置类样式方法 1.4.1....方法1: 操作 css 方法 jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。...事件切换 jQuery中为我们添加了一个新事件hover()，功能类似 css 中的伪类:hover，介绍如下：语法 hover([over,]out) // 其中over和out为两个函数

7.9K2 1

前端成神之路-01_jQuery

注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。 ?...因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。...(详情参考源代码) 1.4. jQuery 样式操作 jQuery中常用的样式操作有两种：css() 和设置类样式方法 1.4.1....方法1: 操作 css 方法 jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。 ...总结: 每次使用动画之前，先调用 stop() ,在调用动画。 1.5.6. 事件切换 jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。

13.2K1 0

网页中代码的顺序是不可忽略的细节

如果有时候，你真的无法修改加载文件的顺序，那么面对这种情况，你可以使用 CSS 中的！important 语法，告诉浏览器要使用这个属性解决冲突。...控制这些颜色的，分别是 CSS 中的：link 、：visited 、：hover、：active 这四个伪类选择器，从名称就可以看出，控制的状态分别是：默认显示、访问过后、鼠标移动上去、点击激活。...这是因为，这四个伪类选择器对 a 元素定义的时候，是有一个顺序的。如果不按照这个顺序，就会出现一些意外情况。...这个顺序有一个很好记的方法，那就是：love hate，即 l（link）ov（visited）e h（hover ）a（active）te。...你编写的 JavaScript 代码以及调用的 jQuery 插件，都需要基于 jQuery 库，所以应该在所有 JavaScript 代码之前，先引入 jQuery 库。

1.6K3 0

jQuery二级菜单的显示隐藏

在jQuery中创建二级菜单的显示和隐藏可以通过使用事件处理函数和CSS样式来实现。HTML 结构首先，需要创建适当的HTML结构来表示二级菜单。一种常见的方法是使用嵌套的和元素。...然后，通过为父级菜单项设置:hover伪类选择器，当鼠标悬停在菜单项上时，显示相应的二级菜单。...JavaScript 交互要使用jQuery实现二级菜单的显示和隐藏，可以使用jQuery的事件处理函数。...可以使用hover()、mouseenter()和mouseleave()等方法来绑定鼠标事件。...hover()方法来绑定鼠标悬停事件。

5.4K3 0

【CSS】515- 如何通过CSS向JS传参的

浏览器是否支持:hover伪类交互我们会开发一些ui组件，希望在桌面端和移动端，以及物联网设备上通用。...好在CSS代码中是有关于浏览器是否支持:hover伪类交互媒体查询判断（此查询有专门文章介绍，点击这里）： @media (any-hover: none) { /* 设备不支持hover事件...很多人应该是通过判断浏览器是否支持touchstart之类的事件来进行判断的。不过可惜这种判断方法是不准确的。因为很多触摸设备也是可以连接鼠标设备的，此时hover事件也应该被良好支持。...二、CSS传参给JS的方法通常借助CSS向JS传参，我都是使用下面这两种方法。...因此，综合来看，使用CSS自定义属性传参在黑暗模式这个场景中是最佳的实现。但是，如果是基于设备宽度传参响应式布局这场场景，还是使用CSS content属性传参为佳。

3.1K1 0

0行JS，30行css搞定导航栏下划线跟随效果

在这之前了，有一次需求就是实现这个效果，我是用js实现的。其实用 Javascript ，也是很麻烦。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？...这里用到了flex布局，相信一直和我一起学习的小伙伴，应该都会了，这里不做过多的解释了，不明白的，请看: 《CSS中Flex布局的可伸缩性(Flexibility)》《CSS3中Flex布局（弹性布局...所以这个是行不通的，我们用:before伪类来实现底边，同时可以移动。...所以，我们利用绝对定位，将 li 的伪元素的宽度设置为0，在 hover 的时候，宽度从 width: 0 -> width: 100%，CSS 如下： li::before { content...~ 选择符所以，我们需要一种方法，能够不改变当前 hover 的 li 的下划线移动方式，却能改变它下一个 li 的下划线的移动方式。这里我们可以借助 ~ 选择符，完成最重要的部分。

3.7K2 0

CSS伪元素的妙用--单标签之美

伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。 ?...有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。...#id:after{ ... } #id::after{ ... } 单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。...雪碧图大家应该也不陌生，通过将多个图片 icon 合为一张图，从而为了减少 http 请求，很多网站对雪碧图的需求还是很大的。...一个标签其实可以相当于 3 个标签来使用，而配合 CSS3 强大的 3D 变换、多重背景，多重阴影等手段，让单标签作画成为了可能，下面是我仅用单个标签，实现的一些动画效果：单标签实现浏览器图标： ?

2K10 0

jQuery 效果

jQuery为我们提供另一个方法，可以停止动画排队：stop() ; 一、显示隐藏显示隐藏动画，常见有三个方法：show() / hide() / toggle() ; 语法规范如下: ?...中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。...总结: 每次使用动画之前，先调用 stop() ,在调用动画。...私信评论 @我私信评论 @我<

8.6K3 0

【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

本篇接我另一篇讲述 CSS 伪元素的文章：【CSS进阶】伪元素的妙用–单标签之美，看完本文觉得有意思的可以再去看看上一篇，分享了一些伪元素的妙用。正文从这里开始：哪些标签不支持伪元素？...我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。...这里有一个纯 CSS 的方案可以解决这个场景，并且不需要添加额外的 HTML 标签，运用了伪元素，先上 Demo：鼠标 hover 一下文字，发现弹出层响应十分迅速（因为就是 CSS hover，没有延迟...最后这种方法也是最近才学习到的，参考了这篇文章，非常值得一读：别想多了，只不过是两端对齐而已本文主要就是多介绍了伪元素的两种实用方法，更多伪元素的妙用可以戳 CSS3奇思妙想，采用单标签完成各种图案...我另一篇讲述 CSS 伪元素的文章：【CSS进阶】伪元素的妙用–单标签之美，看完本文觉得有意思的可以再去看看上一篇。

1.5K4 0

超链接的lvha原则

，可以分类到链接伪类，而focus，hover和active除了用于超链接还适用于其它元素，称为动态伪类 lvfha原则是说对超链接（带href属性的a标签）应用上面的5个伪类时，应该遵守这种固定的顺序...比起伪类的繁荣大家族，伪元素就显得有些伶仃了，到目前（2017/11/4）为止，CSS3规范中仍然只有4个伪元素（CSS2.1就是4个）：首字母：选择元素包含的文本内容的首字母（文本内容包含来自子元素的...CSS3选择器的更多信息，请查看CSS选择器分类总结三.a标签的6种状态 lvfha伪类给超链接提供了5种状态，第6种是指锚点，而不是超链接 link伪类存在的意义之一就是把超链接与锚点区分开，link...伪类只匹配具有href的a标签（即超链接），而非锚点一般桌面浏览器环境下，a标签的6种状态及对应的触发行为分别是： a {/* 处于任意状态的a标签，不论是超链接还是锚点 */} a:link {/*...动态伪类： :hover，:active与:focus) 所以不能确定动态伪类的触发行为，也无法确定这几个伪类适用于哪些元素（表单元素、div等可能支持也可能不支持），都取决于用户代理的实现四.组合伪类

4.3K3 0

伪元素的妙用–单标签之美

:before和::before的区别在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。...CSS2及CSS3伪类区分 CSS3伪元素单双冒号区分有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式...（补充于2016.06.28）我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。...雪碧图大家应该也不陌生，通过将多个图片 icon 合为一张图，从而为了减少 http 请求，很多网站对雪碧图的需求还是很大的。...一个标签其实可以相当于 3 个标签来使用，而配合 CSS3 强大的 3D 变换、多重背景，多重阴影等手段，让单标签作画成为了可能，下面是我仅用单个标签，实现的一些动画效果：单标签实现浏览器图标：

1.1K1 0

【CSS进阶】伪元素的妙用--单标签之美

:before和::before的区别在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。 ? ?...有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。...#id:after{ ... } #id::after{ ... } 单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。...（补充于2016.06.28）我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。...雪碧图大家应该也不陌生，通过将多个图片 icon 合为一张图，从而为了减少 http 请求，很多网站对雪碧图的需求还是很大的。

1.5K12 0

【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式

CSS伪类伪类：伪类这个叫法源自于它们跟类相似，但实际上并没有类会附加到标记中的标签上。...伪类分为两种(以及新增的伪类选择器)： UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，为该元素应用CSS样式。...:hover 结构化伪类：会在标记中存在某种结构上的关系时例如：某元素是一组元素中的第一个或最后一个，为该元素应用CSS样式。...:not和:target(CSS3新增的两个特殊的伪类选择器) UI伪类 UI元素状态伪类选择器有如下几个：属性说明 Selector:link 匹配Selector选择器且未被访问前的元素(通常只能是超链接...示例用于link、visited、active、hover伪类选择器讲解

1371 0

jQuery

jQuery 对DOM的原生方法进行了封装，jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法。...对象只能使用jQuery 封装的方法。...所以，jQuery 只是对js常用属性和方法进行了封装。 DOM使用原生js方法和属性，jQuery 使用jQuery 属性和方法。...元素（伪数组形式存储）的过程。...可以使用 css 方法来修改简单元素样式。

22.9K5 0

10 个不错的 CSS 小技巧

接着，我们会创建一个 :hover 伪类，当用户鼠标移动道元素上时，它将设置 opacity 为 1。此外，你可以包含自定义的样式。...我们使用 checkbox 输入类型，加上一个 :checked 伪类。当 :checked 返回 true 的情况时，我们使用 transform 属性更改状态。你可以使用这种方法实现各种目标。...使用关键帧实现手风琴下拉效果 JavaScript 库，比如 jQuery, Cash 等，即使你想使用一个简单的缩放功能，你都要整个引入。幸运的是，很多 CSS 技巧能够避免这种引入。...侧边栏的 Hover 效果有没有可以使用 CSS 就可以实现一个动态 Hover 效果的侧边栏呢？当然，这得多亏 transform 和 :hover 属性。...使用 first-letter 实现首字母大写在 CSS 中，可以选择确定的 first-of-type 元素。在这个例子中，我们使用 ::first-letter 伪类去实现首字母大写的效果。

1.3K1 0

前端页面替换文本的方法和一些小技巧

在这篇文章里，作者总结了使用五种实现方法，并且在评论里和很多读者进行了一些讨论分析。我在这里总结一些值得注意的东西。...其实这里只是探讨实现方法而已，在实际中不推荐这样使用。虽然 CSS 是负责样式的，但交替显示文本应该超出了“样式”的范畴。...纯 CSS 实现（最近几篇 blog 好像都喜欢给出纯 CSS 实现哈）其实，在前端开发中，我们经常使用 :hover 等伪类，通过 CSS 来实现用户鼠标悬浮到某一元素上时，元素样式的修改。...我们可以通过 CSS 配置一个 :checked 伪类的规则。但是隐藏的 checkbox 也是不可点击的，这里就需要使用 label 标签。...html、CSS、javascript 还是应该各司其职。这样子的代码拥有更好的可读性、可维护性，也可以更好的测试、更好的重用。

2.7K7 0

CSS基础笔记——超链接样式

大家好，又见面了，我是你们的朋友全栈君。...在浏览器中，超链接默认情况下字体为蓝色，带有下划线，鼠标单击时字体为红色，单击后为紫色而在CSS中，我们可以使用超链接伪类来定义超链接在鼠标单击的不同时期的样式 a:link{...} a:visited...定义四个伪类，必须按照link、visited、hover、active的顺序进行，不然浏览器可能无法正常显示这四种样式 <!...; } ---- 深入了解：hover 事实上，：hover伪类可以定义任何一个元素在鼠标经过时的样式举例：”:hover”用于div ：hover伪类应用非常广泛

1.5K1 0

点击加载更多

使用jQuery中hover事件时遇到的一个小问题

能用CSS实现的就不用麻烦JavaScript

【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )

「jQuery」基础 - 01

前端成神之路-01_jQuery

网页中代码的顺序是不可忽略的细节

jQuery二级菜单的显示隐藏

【CSS】515- 如何通过CSS向JS传参的

0行JS，30行css搞定导航栏下划线跟随效果

CSS伪元素的妙用--单标签之美

jQuery 效果

【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

超链接的lvha原则

伪元素的妙用–单标签之美

【CSS进阶】伪元素的妙用--单标签之美

【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式

jQuery

10 个不错的 CSS 小技巧

前端页面替换文本的方法和一些小技巧

CSS基础笔记——超链接样式

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐