完全CSS写的鼠标悬停tip效果

css|鼠标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta name="Author" content="Aultoale" />
<style type="text/CSS">
body {font:normal 12px Verdana}
a#tip {position:relative;left:75px; font-weight:bold;}
a#tip:link,a#tip:hover {text-decoration:none;color:#000;display:block}
a#tip span {display:none;text-decoration:none;}
a#tip:visited {color:#000;text-decoration:underline;}
a#tip:hover #tip_info {display:block;border:1px solid #F96;background:#FFEFEF;padding:10px 20px;position:absolute;top:0px;left:90px;color:#009933}
</style>
</head>
<body>
<a id="tip" href="#">
移到这里试试!
<span id="tip_info">这里是提示信息!</span>
</a>
</body>
</html>

时间: 2024-11-05 20:33:29

完全CSS写的鼠标悬停tip效果的相关文章

鼠标悬停tip效果如何用css实现?

鼠标悬停tip效果,是一个非常有用的功能,在页面布局受到局限的时候,我们不能往页面中添加过多的内容.而鼠标悬停tip效果,可以在鼠标移上去的时候有一个提示信息,我们可以将相关的信息放置在这个tip中,不影响页面美观而又能很好的传达信息. 应用div+css布局,我们用CSS可以实现这样的效果吗?其实这很简单,我们可以新建一个span或div,将之初始设置成:display:none,隐藏这一标签的内容.(关于display可以参考这里)当鼠标移上去的时候,我们将此内容显示出来.然后对其进行定位.

7 个基于CSS/JavaScript的鼠标悬停效果教程

鼠标悬停效果是网页制作的常用特效之一,早期使用Flash可以制作非常炫的效果,现在我们同样也可以使用CSS和JavaScript来实现.   本文中,我们将推荐一些非常不错的鼠标悬停特效教程,希望对大家有所帮助! 1.  Hover and Click Trigger for Circular Elements with jQuery 这个教程介绍如何使用jQuery处理一个真正的圆形元素的悬停效果,使用:hover实现悬停.     2.  Original Hover Effects wit

纯CSS实现鼠标悬停提示的方法

本文实例讲述了纯CSS实现鼠标悬停提示的方法.分享给大家供大家参考.具体分析如下:   这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实现,鼠标放到图片上会显示一个层,也就是悬停时的提示,在这个提示框内你还可以加入图片或是一个列表,这就靠你的发挥了,提示框的背景颜色和文字颜色你都可以自己调. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

网站开发之鼠标悬停简单特效实现(四)

        鼠标悬停等操作和特效是网站设计非常重要的一个内容,常见的包括包括:鼠标移动悬停放大.鼠标悬停背景颜色变换.鼠标悬停下拉菜单显示.图片旋转等特效,这篇文章主要是总结HTML和JavaScript中关于鼠标操作的一些特效,希望基础性文章对你有所帮助,如果文章中存在错误或不足之处,还请海涵~ 一. 鼠标悬停图片放大效果         该功能主要是通过超链接<a>实现的,其中hover是表示悬停的效果: <html> <head> <title>鼠

用CSS控制输入框input悬停交互样式

制作表单的时候,实现鼠标悬停交互效果有多种方法: 1.在xhtml中直接写入onmouseover.onmouseout脚本就可以实现了,但这样就违背了web标准所倡导的内容.表现相分离的原则.以后若要对此进行修改也将会很繁琐.这样直接写入xhtml也会让页面代码增加,如果只是一个input输入框或许是无所谓的,如果是几十个几百个,增加的字节数就很宠大了. 2.在xhtml中加入小脚本,鼠标经过时可以切换CSS.具体内容请看这篇文章.虽然实现了内容.表现相分离,以后的修改也会很方便.但同样会让页

js实现动画特效的文字链接鼠标悬停提示的方法

 这篇文章主要介绍了js实现动画特效的文字链接鼠标悬停提示的方法,实例分析了javascript操作css的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js实现动画特效的文字链接鼠标悬停提示的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD

js-用jquery写了个图片切换效果,想让鼠标悬停图片时候图片停止切换,没有悬停则自动切换

问题描述 用jquery写了个图片切换效果,想让鼠标悬停图片时候图片停止切换,没有悬停则自动切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 幻灯效果 var scrollDuration = 1000;//切换速度 var timeDuration = 2

CSS+js实现的一个优秀的超链接鼠标悬停提示

css|js|链接|鼠标 超链接,一般的做法是给一个title属性,这样用户的鼠标悬停在超链接上的时候,它会显示title的内容.但是,你是否厌倦了千篇一律的鼠标悬停效果呢? 当然,也有这方面很炫的代码,但是才跨浏览器方面功夫还是不够,呵呵.我遇到一个不错的css,在IE和Firefox下浏览一样的效果. 实际的效果大家可以参考:校园招聘一网打尽(http://www.xyzp.net/).http://www.xyzp.net/index.html 代码如下:/****************

一个优秀的超链接鼠标悬停提示CSS+JS

css|js|链接     超链接,一般的做法是给一个title属性,这样用户的鼠标悬停在超链接上的时候,它会显示title的内容.但是,你是否厌倦了千篇一律的鼠标悬停效果呢?       当然,也有这方面很炫的代码,但是才跨浏览器方面功夫还是不够,呵呵.我遇到一个不错的css,在IE和Firefox下浏览一样的效果.       下图是实际运行的效果: 代码如下: /******************************************************   dw_view