果是自己通过 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，即可获取。

「链接」