家好，今天給大家介紹一款，css3實現的鼠標懸停特效，鼠標懸停給圖片加邊框html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

鼠標放在圖像上，圖像后面的邊框就會上浮包住圖像（圖2）

源碼完整，需要的朋友可以下載學習（圖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/