整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

css3实现的鼠标悬停特效,鼠标悬停给图片加边框html页面前端源码

家好,今天给大家介绍一款,css3实现的鼠标悬停特效,鼠标悬停给图片加边框html页面前端源码(图1)。送给大家哦,获取方式在本文末尾。

图1

鼠标放在图像上,图像后面的边框就会上浮包住图像(图2)

图2

源码完整,需要的朋友可以下载学习(图3)

图3

本源码编码:10191,需要的朋友,访问下面链接后,搜索10191,即可获取。

「链接」

TML 的 onmouseover 事件是网页开发人员工具箱中一个强大的工具。通过本文,你将全面掌握 onmouseover 事件的使用方法,并了解如何创建充满活力和互动的网页元素。从基本原理到高级应用,我们将探索 onmouseover 事件的各种可能性。

onmouseover 事件揭秘

onmouseover 事件在鼠标指针移动到特定元素上方时触发。这为网页开发人员提供了捕捉用户互动并相应地改变网页元素的机会。该事件通常与 onmouseout 事件搭配使用,后者在鼠标指针移出元素时触发。

基本语法

onmouseover="代码"

在这里,"代码" 是指当鼠标悬停在元素上时你希望执行的 JavaScript 代码。让我们看一个简单的例子:

<div onmouseover="alert('你好,世界!')">悬停我</div>

在这个例子中,当用户将鼠标悬停在 "悬停我" 元素上时,它会弹出一个带有 "你好,世界!" 消息的警示框。

动态效果和样式更改

onmouseover 事件真正闪光的地方在于它可以改变网页元素的样式和外观。你可以改变元素的背景颜色、边框、字体大小等。来看一个例子:

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: lightgray;
  }
</style>

<div class="box" onmouseover="this.style.backgroundColor = 'red'">
  将鼠标悬停于此
</div>

在这个例子中,当鼠标悬停在方块上时,它的背景颜色会变成红色。

图像效果

onmouseover 事件在图像上也很有用。你可以创建图像悬停效果,为你的网页增添视觉吸引力。来看一个例子:

<img src="image1.jpg" onmouseover="this.src='image2.jpg'">

在这个例子中,当鼠标悬停在图像上时,图像会切换为 "image2.jpg"。

菜单和下拉列表

onmouseover 事件在创建菜单和下拉列表时也很有用。你可以显示隐藏的菜单项或下拉列表,为用户提供动态的导航体验。

<div onmouseover="document.getElementById('menu').style.display = 'block'">
  显示菜单
</div>

<div id="menu" style="display: none;">
  <a href="#">链接 1</a>
  <a href="#">链接 2</a>
  <a href="#">链接 3</a>
</div>

结论:释放你的创造力

onmouseover 事件为网页开发人员提供了增强用户体验和创建动态交互的机会。从简单的样式更改到复杂的菜单系统,onmouseover 事件都可以胜任。通过本文的学习,你已经掌握了 onmouseover 事件的基本原理和应用。现在,你可以利用这些知识,在你的网页设计中加入生动的元素,创造出引人入胜的用户体验!释放你的创造力,让网页更加充满活力!

动高亮效果

  • 源码

<style>
  a {
    text-decoration: none;
    color: #8c7ae6;
    font-size: 24px;
    box-shadow: inset 0 0 0 #8c7ae6;

    transition: all 300ms ease-in-out;
  }

  a:hover {
    box-shadow: inset 180px 0 0 0 #8c7ae6;
    color: white;
  }

</style>
<a href="#">Hover this link</a>

文本交换效果

  • 源码
<style>
  a {
    overflow: hidden;
    position: relative;
    display: inline-block;
  }

  a::before,
  a::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
  }
  a::before {
    background-color: #54b3d6;
    height: 2px;
    bottom: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
  }
  a::after {
    content: attr(data-replace);
    height: 100%;
    top: 0;
    transform-origin: 100% 50%;
    transform: translate3d(200%, 0, 0);
    transition: transform 0.3s ease-in-out;
    color: #54b3d6;
  }

  a:hover::before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
  }
  a:hover::after {
    transform: translate3d(0, 0, 0);
  }

  a span {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
  }

  a:hover span {
    transform: translate3d(-200%, 0, 0);
  }

  body {
    display: grid;
    font-size: 27px;
    height: 100vh;
    place-items: center;
  }

  a {
    text-decoration: none;
    color: #18272f;
    font-weight: 700;
    vertical-align: top;
  }
</style>

<p>Hover <a href="#" id="style-2" data-replace="this link">
  <span>this link</span>
</a></p>

背景拉伸效果

  • 源码
<style>
  a {
    text-decoration: none;
    color: #18272f;
    font-weight: 700;
    position: relative;
  }

  a::before {
    content: "";
    background-color: #00a8ff;
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 100%;
    height: 8px;
    z-index: -1;
    transition: all 300ms ease-in-out;
  }

  a:hover::before {
    bottom: 0;
    height: 100%;
  }

  body {
    display: grid;
    font-size: 27px;
    line-height: 1.5;
    height: 100vh;
    place-items: center;
  }
</style>

<p>Hover this <a href="#">cool</a> link.</p>

从右到左颜色交换效果

  • 源码
<style>
  a {
    background-image: linear-gradient(to right, #54b3d6, #54b3d6 50%, #000 50%);
    background-size: 200% 100%;
    background-position: -100%;
    display: inline-block;
    padding: 5px 0;
    position: relative;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 300ms ease-in-out;
  }

  a:before {
    content: "";
    background: #54b3d6;
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 3px;
    transition: all 300ms ease-in-out;
  }

  a:hover {
    background-position: 0;
  }

  a:hover::before {
    width: 100%;
  }

  body {
    display: grid;
    font-size: 27px;
    height: 100vh;
    place-items: center;
  }
</style>

<a href="">Hover This Link</a>

彩虹下划线效果

  • 源码
<style>
  a {
    color: black;
    text-decoration: none;
    background: linear-gradient(to right, #64c8c8, #64c8c8),
      linear-gradient(to right, #ff0000, #ff00b4, #0064c8);
    background-size: 100% 3px, 0 3px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
  }

  a:hover {
    background-size: 0 3px, 100% 3px;
  }

  body {
    display: grid;
    font-size: 27px;
    font-weight: 700;
    height: 100vh;
    place-items: center;
  }
</style>

<a href="">Hover This Link</a>

原文地址:https://css-tricks.com/css-link-hover-effects/