html5页面中鼠标悬停效果,CSS实例：非常不错的鼠标悬停TIP效果！

在实际开发中，我们会给图片加上alt、给链接加上title，为了出故障预备，也可以提醒用户的内容是什么，或仅仅是tip提示。今天我们介绍一款不错的鼠标悬停TIP效果，图片如下：

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

Example Source Code []

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提示的容器效果。

我们看最终的运行效果：

Source Code to Run []

[ 可先修改部分代码再运行查看效果 ]

html5页面中鼠标悬停效果,CSS实例：非常不错的鼠标悬停TIP效果！_div+css布局教程...相关推荐

html5页面中打开本地app，如果没有跳转下载页面的解决方案
需求效果在推广网页上用户点击产品的详细信息时,判断出这个用户手机上是否安装自己的app如果安装了直接自动打开手机内的app应用,若没有则跳转app的下载页技术实现直接用window.locati ...
html5页面中添加腾讯地图api
html5页面中添加腾讯地图api: 点击地图出现详细的地图: 这是一个基于微信端的地图处理方案. 先看看html架构: <a id="aToMap" href=" ...
在html5页面中添加canvas,HTML页面中添加Canvas标签示例
在HTML页面的中,可以用像下面的代码来添加标签: 复制代码代码如下: Your browser does not support HTML5 Canvas. 译注:对于canvas,以下写法是不允 ...
如何在HTML5页面中使用鼠标滚轮事件
支持鼠标滚轮可以为HTML5网页增加更多的交互性.不仅是滚动页面,您还可以执行不同的操作,如放大或缩小. 查看鼠标滚轮演示页面- 大多数的浏览器都支持元素的"mousewheel" ...
京东在html5页面中打开本地app的解决方案
从html5打开本地的app–如果本地没有app就跳转到下载页面,大家都会认为这是一项很简单的操作.网上的教程也很多,但是可行性都不高.因为手机系统和浏览器型号各不相同,所以兼容性会是让各个前端工程师 ...
android h5弹窗,Android嵌套html5页面中alert 弹出框问题
最近项目中遇到一个头疼的问题,那就是在安卓里嵌套html5的时候发现alert弹出框出现了问题那就是弹出的时候会出现串来自http://xxxxx 网页的提示然后下面出来具体的弹出信息,还有更奇 ...
.Net页面中使用在线编辑框实例
编辑页前台代码中添加 -------------------------------------------- 1 <OBJECTid="doc_html"style=&qu ...
android webview 多文件上传,Android中的webview支持页面中的文件上传实例代码
Android webview在默认情况下是不支持网页中的文件上传功能的: 如果在网页中有,在android webview中访问时也会出现浏览文件的按钮但是点击按钮之后没有反应... 那么如何能够 ...
html页面添加大于号,2.7 在 HTML5 页面中插入半角的大于号“ ” , 使用的标记符应该是( )...
[单选题]0.4mol · L -1 氨水中 OH - 浓度是 0.1mol · L -1 氨水中 OH - 浓度的 [单选题]一个栈的输入序列为1 2 3 4 5,则下列序列中不可能是栈的输出序列的 ...

html5页面中鼠标悬停效果,CSS实例：非常不错的鼠标悬停TIP效果！_div+css布局教程...

html5页面中鼠标悬停效果,CSS实例：非常不错的鼠标悬停TIP效果！_div+css布局教程...相关推荐

最新文章

热门文章