鼠标悬停效果二

紫微前端

于 2022-06-30 10:51:21 发布

阅读量102

点赞数

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

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

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文详细介绍了如何使用JavaScript在前端实现鼠标悬停时的交互效果，通过实例代码展示了在HTML元素上添加事件监听器，实现元素状态变化及样式动态更新的方法。

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

代码展示

<h3 class="hover">Hover Me</h3>
<style>

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
}
h3 {
  font-family: system-ui, sans-serif;
  font-size: 3rem;
  margin:0;
  cursor: pointer;
  padding: 0 .1em;
}

.hover {
  --b: 0.1em;   /* the thickness of the line */
  --c: #1095c1; /* the color */
  
  color: #0000;
  padding-block: var(--b);
  background: 
    linear-gradient(var(--c) 50%,#000 0) 0% calc(100% - var(--_p,0%))/100% 200%,
    linear-gradient(var(--c) 0 0) 0% var(--_p,0%)/var(--_p,0%) var(--b) no-repeat;
  -webkit-background-clip: text,padding-box;
          background-clip: text,padding-box;
  transition: .3s var(--_s,0s) linear,background-size .3s calc(.3s - var(--_s,0s));
}
.hover:hover {
  --_p: 100%;
  --_s: .3s;
}


</style>