純CSS實現鼠標懸停提示的方法（CSS小白第三期）

標懸停提示是指當鼠標懸停在某一元素上時瀏覽器彈出的黃色小文本框，一般開發者大多會結合Javascript創建各式各樣的自定義提示，其實通過CSS定位也可以實現，首先我們看一下效果圖：

接下來我們詳細介紹它的實現方法：

首先創建一個簡單的帶鏈接的HTML（根據自己的需要），在鏈接顯示的文本后面添加需要提示的內容并置于span標簽中（加粗部分）
<p>
<a href="www.laosiji.com" style="text-decoration:none">www.你懂的.com<span>(未滿18周歲請勿點擊)</span></a> is a Horror Movies Website.
</p>
接下來是關鍵部分，先將鏈接的position屬性設置為relative,因為<a>是<span>的父級元素，這樣接下來才可以讓<span>中的提示內容根據<a>中的鏈接文本進行絕對定位。<span>中的提示內容我們不希望它一開始就顯示出來，所以要將它的display屬性設置為none.
a{position:relative;}
a span{display:none;}
當鼠標懸停在鏈接上時我們希望顯示出span中的提示內容，這時就需要將span的display屬性設置為block，為了讓其出現在鏈接的右下方，需要將span的position屬性設置為absolute，并設置一定的距離（頂部1em,左邊2em).
a{position:relative;}
a span{display:none;}
a:hover span{display:block;
position:absolute;top:1em;left:2em;}
前兩步基已經完成了本次案例的主體，剩下的就是給span添加一些樣式，讓它看起來更像是提示。可以添加一些內邊距邊框和背景顏色等。
<style type="text/css">
a{position:relative;}
a span{display:none;}
a:hover span{display:block;
position:absolute;top:1em;left:2em;
width:160px;
padding:0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:red;}
</style>
PS:最后科普一下display:none與visible:hidden的區別
display:none ---不為被隱藏的對象保留其物理空間，即該對象在頁面上徹底消失，通俗來說就是看不見也摸不到。
visible:hidden--- 使對象在網頁上不可見，但該對象在網頁上所占的空間沒有改變，通俗來說就是看不見但摸得到。

標懸停系列1-1

css源碼

.hoverB1 {
 background: none;
 border: 0;
 box-sizing: border-box;
 margin: 1em;
 height: 45px;
 width: 160px;
 box-shadow: inset 0 0 0 2px #f8c013;
 color: #f8c013;
 font-size: inherit;
 font-weight: 700;
 position: relative;
 vertical-align: middle;
 transition: color 0.25s;
}
.hoverB1::before, .hoverB1::after {
 box-sizing: inherit;
 content: '';
 position: absolute;
 border: 2px solid transparent;
 width: 0;
 height: 0;
}
.hoverB1::before {
 top: 0;
 left: 0;
}
.hoverB1::after {
 bottom: 0;
 right: 0;
}
.hoverB1:hover {
 color: #60daaa;
}
.hoverB1:hover::before, .hoverB1:hover::after {
 width: 100%;
 height: 100%;
}
.hoverB1:hover::before {
 border-top-color: #60daaa;
 border-right-color: #60daaa;
 transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.hoverB1:hover::after {
 border-bottom-color: #60daaa;
 border-left-color: #60daaa;
 transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

html源碼

<button class="hoverB1">hover1</button>

鼠標懸停系列1-2

css源碼

.hoverB2 {
 background: none;
 border: 0;
 box-sizing: border-box;
 margin: 1em;
 height: 45px;
 width: 160px;
 box-shadow: inset 0 0 0 2px #f45e61;
 color: #f45e61;
 font-size: inherit;
 font-weight: 700;
 position: relative;
 vertical-align: middle;
 transition: color 0.25s;
}
.hoverB2::before, .hoverB2::after {
 box-sizing: inherit;
 content: '';
 position: absolute;
 border: 2px solid transparent;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 -webkit-transform-origin: center;
 transform-origin: center;
}
.hoverB2:hover {
 color: #6477b9;
}
?
.hoverB2::before {
 border-top: 2px solid #6477b9;
 border-bottom: 2px solid #6477b9;
 -webkit-transform: scale3d(0, 1, 1);
 transform: scale3d(0, 1, 1);
}
.hoverB2::after {
 border-left: 2px solid #6477b9;
 border-right: 2px solid #6477b9;
 -webkit-transform: scale3d(1, 0, 1);
 transform: scale3d(1, 0, 1);
}
.hoverB2:hover::before, .hoverB2:hover::after {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
 transition: -webkit-transform 0.5s;
 transition: transform 0.5s;
 transition: transform 0.5s, -webkit-transform 0.5s;
}

html源碼

<button class="hoverB2">hover2</button>

鼠標懸停系列1-3

css源碼

.hoverB3 {
 width:160px;
 height:45px;
 line-height: 45px;
 text-align: center;
 position: relative;
 appearance: none;
 background: #f72359;
 border: none;
 color: white;
 font-size: 1.2em;
 cursor: pointer;
 outline: none;
 overflow: hidden;
 border-radius: 80px;
 display: inline-block;
}
.hoverB3 span {
 position: relative;
}
.hoverB3::before {
 --size: 0;
 content: '';
 position: absolute;
 left: var(--x);
 top: var(--y);
 width: var(--size);
 height: var(--size);
 background: radial-gradient(circle closest-side, #4405f7, transparent);
 transform: translate(-50%, -50%);
 transition: width .2s ease, height .2s ease;
}
.hoverB3:hover::before {
 --size: 400px;
}

html源碼

<button class="hoverB3"><span>hover3</span></button>

鼠標懸停系列2-1

公共css源碼

.set_1_btn {
 color: #333;
 cursor: pointer;
 display: block;
 font-size: 16px;
 font-weight: 400;
 line-height: 45px;
 margin-right: 2em;
 text-align: center;
 max-width: 160px;
 position: relative;
 text-decoration: none;
 text-transform: uppercase;
 vertical-align: middle;
 width: 100%;
}
.set_1_btn:hover {
 text-decoration: none;
}

css源碼

.Vbtn-1 {
 background:transparent;
 text-align: center;
 float:left;
}
.Vbtn-1 svg {
 height: 45px;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}
.Vbtn-1 rect {
 fill: none;
 stroke: #e1b700;
 stroke-width: 3;
 stroke-dasharray: 422, 0;
 transition: all 450ms linear 0s;
}
.Vbtn-1:hover {
 background: rgba(225, 51, 45, 0);
 font-weight: 900;
 letter-spacing: 1px;
 transition: all 150ms linear 0s;
}
.Vbtn-1:hover rect {
 stroke-width: 5;
 stroke-dasharray: 15, 310;
 stroke-dashoffset: 48;
 -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
 transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

html源碼

<a href="#" class="set_1_btn Vbtn-1"> 
 <svg>
 <rect x="0" y="0" fill="none" width="100%" height="100%"></rect>
 </svg>
 Hover 
</a>

鼠標懸停系列2-2

css源碼

.Vbtn-2 {
 letter-spacing: 0;
 transition: all 150ms linear 0s;
 float:left;
}
.Vbtn-2:hover, .Vbtn-2:active {
 letter-spacing: 5px;
 transition: all 150ms linear 0s;
}
.Vbtn-2:after, .Vbtn-2:before {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 border: 1px solid rgba(255, 255, 255, 0);
 bottom: 0px;
 content: " ";
 display: block;
 margin: 0 auto;
 position: relative;
 -webkit-transition: all 280ms ease-in-out;
 transition: all 280ms ease-in-out;
 width: 0;
}
.Vbtn-2:hover:after, .Vbtn-2:hover:before {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 border-color: #56c5ff;
 -webkit-transition: width 350ms ease-in-out;
 transition: width 350ms ease-in-out;
 width: 70%;
}
.Vbtn-2:hover:before {
 bottom: auto;
 top: 0;
 width: 70%;
}

html源碼

<a href="#" class="set_1_btn Vbtn-2">Hover</a>

鼠標懸停系列2-3

css源碼

.Vbtn-3 {
 background:transparent;
 text-align: center;
 float:left;
}
.Vbtn-3 svg {
 height: 45px;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}
.Vbtn-3 rect {
 fill: none;
 stroke: #f2625a;
 stroke-width: 3;
 stroke-dasharray: 422, 0;
 transition: all 450ms linear 0s;
}
.Vbtn-3:hover {
 background: rgba(225, 51, 45, 0);
 font-weight: 900;
 letter-spacing: 1px;
 transition: all 150ms linear 0s;
}
.Vbtn-3:hover rect {
 stroke-width: 5;
 stroke-dasharray: 15, 310;
 stroke-dashoffset: 48;
 -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
 transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

html源碼

<a href="#" class="set_1_btn Vbtn-3"> 
 <svg>
 <rect x="0" y="0" fill="none" width="100%" height="100%"></rect>
 </svg> 
 Hover 
</a>

鼠標懸停系列2-4

css源碼

.Vbtn-4 {
 letter-spacing: 0;
 transition: all 150ms linear 0s;
 float:left;
}
.Vbtn-4:hover, .Vbtn-4:active {
 letter-spacing: 5px;
 transition: all 150ms linear 0s;
}
.Vbtn-4:after, .Vbtn-4:before {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 border: 1px solid rgba(255, 255, 255, 0);
 bottom: 0px;
 content: " ";
 display: block;
 margin: 0 auto;
 position: relative;
 -webkit-transition: all 280ms ease-in-out;
 transition: all 280ms ease-in-out;
 width: 0;
}
.Vbtn-4:hover:after, .Vbtn-4:hover:before {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 border-color: #666;
 -webkit-transition: width 350ms ease-in-out;
 transition: width 350ms ease-in-out;
 width: 70%;
}
.Vbtn-4:hover:before {
 bottom: auto;
 top: 0;
 width: 70%;
}

html源碼

<a href="#" class="set_1_btn Vbtn-4">Hover</a>

搬你想搬，蓋你所需，碼字不易，且行且珍惜！

下一系列預告：

實現鼠標懸停時圖片放大的效果，可以使用 HTML、CSS 和 JavaScript 來實現。以下是一個簡單的示例代碼：

HTML:

CSS (僅供示例，可根據實際需求調整樣式):

#myImage {

transition: transform 0.3s;

}

#myImage:hover {

transform: scale(1.2);

}

JavaScript (用于添加鼠標懸停事件監聽器):

document.getElementById("myImage").addEventListener("mouseover", function () {

// 這里可以添加其他鼠標懸停時的操作

});

document.getElementById("myImage").addEventListener("mouseout", function () {

// 這里可以添加鼠標移出時的操作

});

在上述代碼中，當鼠標懸停在圖片上時，通過 CSS 的 transform:scale(1.2) 實現了圖片放大的效果。同時，使用 JavaScript 添加了鼠標懸停和移出事件的監聽器，以便在這些事件發生時執行其他操作。

在線咨詢

上一篇：每天一道前端面試題系列（2）：HTML5有哪些新特性
下一篇：獨家｜手把手教你學習R語言（附資源鏈接）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

純CSS實現鼠標懸停提示的方法（CSS小白第三期）

您的項目需求