鼠标悬停效果四

紫微前端

于 2022-06-30 11:11:57 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

分类专栏：原生javascript制作各种酷炫组件文章标签：前端 html

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125536804

原生javascript制作各种酷炫组件专栏收录该内容

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文介绍了如何使用HTML和CSS创建鼠标悬停效果，通过代码示例详细解释了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码展示

<div class="inverted-1">1. Hover me </div>
<div class="inverted-2">2. Hover me </div>
<div class="inverted-3">3. Hover me </div>
<div class="inverted-4">4. Hover me </div>
<div class="inverted-5">5. Hover me </div>
<div class="inverted-6">6. Hover me </div>
<div class="inverted-7">7. Hover me </div>
<div class="inverted-8">8. Hover me </div>

<style>
.inverted-1 {
  background:
    linear-gradient(black 50%, #fff 0) 0 var(--_d, 0) /100% 200% no-repeat,
    linear-gradient(#0000 50%, #000 0) 0 var(--_d, 0) /100%

了解本专栏