html5页面中如何实现鼠标悬停效果

这篇文章主要介绍了html5页面中如何实现鼠标悬停效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

企业建站必须是能够以充分展现企业形象为主要目的，是企业文化与产品对外扩展宣传的重要窗口，一个合格的网站不仅仅能为公司带来巨大的互联网上的收集和信息发布平台，创新互联建站面向各种领域：水电改造等网站设计、成都全网营销推广解决方案、网站设计等建站排名服务。

这样的效果在实际开发中是非常有用的。我们可以为我们的链接加上这样的效果，以更加体现网页的亲和力与易用性。我们也可以在提供下载的链接下提供这样的tip提示。我们看这样的鼠标悬停TIP效果是如何实现的。看下面的XHTML代码：

Example Source Code []

Div CSS教程

Div CSS教程

在链接A标签中，嵌套了span与p标签，这就是我们的tip的基本元素了，我们看CSS如何控制显示它。CSS代码如下：

Example Source Code []

* {

font-size:12px;

}

。tip{

position:relative;

color:#00c;

text-decoration:none;

}

。tip:hover{

background:none;

color:#000;

}

。tip span {

display:none;

}

。tip:hover span{

display:block;

position:absolute;top:26px;left:10px;

border-bottom:2px solid #eee;

border-right:2px solid #eee;

}

。tip:hover span p {

color:#f60;

text-align:left;

padding:5px;

border:1px solid #ccc;

background:#fff;

}

整体布局声明，文字大小为12px。链接的文字及提示tip的文字均为12px。

定义类tip为相对定位，文字颜色为#00c。链接的提示下划线为无。

类tip:hover效果，无背景色，文字颜色为#000。

在默认情况下，类tip下的span是不显示的，即：display:none。

类tip:hover状态下的span设置：

定义为块元素，绝对定位于距上26px距左为10px。

下边框与右边框均为2px的实线，颜色为#eee。

这里是tip提示的最外边框，此设置定位它的位置并形成了简单的阴影效果。

类tip:hover状态下的span里面的p的设置：

定义文字颜色为#f60，居左对齐。

填充为5px，使文字与边框有一定的距离。

边框为1px的实线，颜色为#ccc。背景色为白色#fff。

这里定义了tip文字的显示，将tip四面形成实绩边框。

再加上前面span中定义了下边框及右边框，就勾勒出了tip提示的容器效果。

感谢你能够认真阅读完这篇文章，希望小编分享的“html5页面中如何实现鼠标悬停效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

当前标题：html5页面中如何实现鼠标悬停效果
当前路径：http://shouzuofang.com/article/pdephd.html