果是自己通過 html 實現的報表可以通過在對應格子中掛 js 事件，onmouseover 是鼠標經過觸發的事件，onmouseout 是鼠標離開觸發的事件，可以利用這兩個事件來實現鼠標懸停顯示文字，鼠標移走文字消失的效果，在跨域訪問的時候需要注意下。

現在大多報表工具都提供這樣的功能，不需要 JS 方法，只需要簡單設置就可以實現效果，而且提示的信息也可以是動態計算的，在動態擴展的格子中，格子中的數據不同，顯示的提示信息也不同，具體實現可以參考看下這篇文章的介紹 http://c.raqsoft.com.cn/article/1551748778572。

HTML 在頁面上放置了一個按鈕

<button class="btn">點擊按鈕</button>

如果想要實現當鼠標懸停在按鈕上時，按鈕文字加粗，在 CSS 里這樣設置

.btn:hover {
    font-weight: bolder;
}

但是這樣做了之后，當文字加粗后，勢必會將按鈕的尺寸撐的更大。那么有可能會影響到按鈕周圍其他 HTML 元素的位置，如果你的頁面內容比較多，而且比較緊湊的話，撐大的按鈕會將周圍的元素推開，這很有可能會擾亂頁面的布局。

如果既要保留按鈕的鼠標懸停文字加粗的效果，還不能影響到周圍元素的位置，可以再給按鈕設定一個固定的尺寸。

.btn {
    padding: 1rem;
    width: 4rem;
}

.btn:hover {
    font-weight: bolder;
}

這樣按鈕的尺寸就不會變化，但是文字在鼠標懸停時會加粗，按鈕周圍的元素也不會受到影響。

以上這種情況一般在頁面頂部的導航條上最為常見，請大家注意。

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

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

源碼完整，需要的朋友可以下載學習（圖3）

本源碼編碼：10191，需要的朋友，訪問下面鏈接后，搜索10191，即可獲取。

「鏈接」