html中hover的作用 css悬停hover效果的3大应用场景

我提到的伪类其实很实用。
上周有客户问我这个问题...不过，我写的场景和代码看起来有点像教科书，而且很标准...
我曾经改造过一个电子商务网站，有很多地方使用了悬停效果。
以导航菜单为例。
当时我尝试了很多种写作方式。
在我的示例中，nav ul li:hover 非常常见，实际上可以清楚地指示当前位置。
不过，我还看到了更酷的功能，比如悬停时缩放整个菜单项，或者旋转小图标，看起来更引人注目……但是，请注意，如果使用太多，缩放效果很容易变得无聊。
我遇到的问题是菜单中的某个项目放大得非常清楚，使用户感到困惑。

你举的按钮交互的例子非常经典。
.cta-button：悬停背景变暗，这几乎已成为标准。
在活动页面上，为了使按钮更加突出，我还添加了阴影效果。
飞行时影子加深，离开时影子淡化。
但要注意过渡时间。
您的代码中写入的是过渡：背景颜色0.3 秒；。
之前有一次写了0.5 秒，发现移动设备有点卡。
后来我把它改成了0.2 秒，让它变得流畅。

产品列表的滚动效果确实可以改善体验。
我写product:hover .product-info的方式很常见，我以前也用过。
但需要注意的一个问题是，如果产品信息较多，直接出现在绝对位置可能会遮挡下面的内容。
我在做手机壳清单的时候就遇到了这种情况。
后来，我将其更改为滚动时的浮动图像，并且信息在右侧滑动，因此不会妨碍。

你说的注意事项我也深有体会。
在移动端适配方面，确实很多手机只是一碰即走，并没有什么滑动的功能。
当时我们的项目中，我们给按钮添加了state:active，背景颜色变暗了一点，有点类似于按下的效果。
关于性能改进，你是对的。
3 D 转换会消耗性能。
我们后来改用转换：scale (1 .05 )；其具有类似的效果，但速度更快。

无论如何，你提到的场景和代码都很好，很实用。
我只是感觉，实际使用的时候，你得根据你项目的条款去修改，不能生搬硬套。
看看这些场景。
您对某人有特别疑问吗？或者您最近遇到过滚动问题吗？我们可以详细谈谈。

html中hover的用法是什么？

HTML如何设置链接悬停样式？a:hover的用法是什么？

上周 我的这个朋友 给大家介绍一下HTML链接hover样式的实现
2 02 3 3 月1 5 日 我查了资料，
a：hover是关键 语法非常简单 a:hover{color:red;}
例如： 一个{颜色：蓝色;} a:hover{color:red;}
悬停时变为红色 非常直观，对吧？
必须遵守LVHA命令 link->visited->hover->active
不正确的顺序会导致问题 例如，悬停被活跃的
过渡效果所覆盖，这种效果使用得非常频繁 Transition:color 0.3 s
颜色变化流畅 0.3 秒的转换过渡时间也很常用 a:hover{transform:scale(1 .1 );}
链接会稍微放大 更有互动感
但要注意表现 复杂的阴影冻结。
最好使用“变换”。
浏览器加速很好
可访问性很重要 : 应该保持专注 键盘导航用户需要清晰的轮廓 颜色对比度要足够
应考虑旧浏览器 您可以使用 -webkit 前缀

应谨慎使用花哨的动画。
一个简单的效果就足够了 不要太夸张
总结一下 a:hover是基础 过渡和转变改善了体验。
LVHA顺序不能错 : 重点，别忘了 需要考虑的性能和兼容性
仅此而已 由你决定