单纯使用CSS实现动态提示

最新推荐文章于 2023-09-20 08:52:36 发布
最新推荐文章于 2023-09-20 08:52:36 发布
阅读量1k 收藏
点赞数
分类专栏： CSS 文章标签： css javascript mozilla border class opera
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asthlon/article/details/56583
版权
<style>
body { font:verdena; font-size:14px; color:#000 }
h1{ font:verdena; font-size:22px; color:#000 }
h2{ font:verdena; font-size:15px; color:#000; text-align:left }
div#main { margin:30 }
/*关键代码开始*/
a.info {
 position:relative; z-index:0; background-color:#ccc; color:#000; text-decoration:none }
a.info:hover {
 z-index:1; background-color:#ff0 }
a.info span {
 display: none }
a.info:hover span { display:block; position:absolute; top:25px; left:60px; width:130px; border:1px solid #0cf; background-color:#cff; color:#000; text-align: center }
/*关键代码结束*/
</style>
<body>
<div id="main">
<h1>单纯使用CSS实现动态提示信息</h1>
<h1>不用js可以实现信息提示效果?!(title和alt除外)</h1>
<h2>By [51js.com]zdzhuo</h2>
<h2>Ie5.5+, Opera7.0, Netscap7.0, Mozilla1.4 都能正常使用</h2>
<br><a class="info" href="javascript:;"><b>这是提示信息</b><span>www.51js.com</span></a>不需要js就能实现的提示信息<a class="info" href="javascript:;"><b>单纯使用CSS实现提示信息</b><span>一个非常简便的方法<br>原理也浅显易懂</span></a><br><br><a class="info" href="javascript:;"><img src=" http://nb001722.sosoo.net/51js.gif" border="0"><span>这是我在51js.com的专用头像</span></a><br><br><br>
</div>
</body>
asthlon
关注
专栏目录
css图像描边,纯CSS实现帅气的SVG路径描边动画效果
weixin_42487737的博客
08-03 1122
一、应该人人皆会的基础技术简而言之，就是让SVG的描边像是有人绘制一样的动画效果。国外很多相关介绍的文章，来看看一些效果gif吧~我至少看到了4篇外文对此技术介绍(参见文末参考文章)，觉得挺有意思，也很好入门，可以不依赖JavaScript，故移花接木，借花献佛，以自己的理解给大家介绍下。二、效果先行，兴趣挑起您可以狠狠地点击这里：帅气的签名动画demo三、你需要知道的基础知识SVG中有个比较重要...
纯CSS实现数据上报和HTML验证
大前端
07-30 362
一、纯CSS实现数据上报 举个例子，要跟踪并统计某个按钮的点击事件： .button-1:active::after { content: url(./pixel.gif?action=click&id=button1); display: none; } .button-2:active::after { content: url(./pixel.gif?act...
不同css样式的消息提示框
04-28
包含了几种css消息提示框，通过js控制
CSS 提示工具：Tooltip
最新发布
梁辰兴的博客
09-20 1928
基础提示框（Tooltip）是一种常见的用户界面元素，通常用于向用户显示有用的信息或提示。在这个示例中，创建了一个带有 “Hover Me” 文本的按钮，当鼠标悬停在按钮上时，会显示一个位于按钮下方的提示框。CSS 提示工具是一种常用的用户界面元素，通常用于向用户显示有用的信息或提示。在CSS中，我们可以创建基于定位的提示工具，这通常涉及到使用绝对定位来放置提示框，以便使其正确地出现在鼠标指针下方。同时，还使用CSS来设置提示框的样式，包括位置、背景色、字体颜色、边框圆角等。来触发提示框的显示。
css实现提示消息框
Linvo's blog
02-15 2783
a.info span {display:none;} a.info:hover span {display:block;position:absolute;border:1px solid #000000;padding:3px;background:#A6D6ED;color:#333;text-decoration: none;filter:
CSS——消息提示(聊天框)
spfLinux的博客
11-06 1810
Document #div1 { margin-left: 100px; width: 140px; height: 100px; background: #088CB7; position: relative; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-rad
CSS实现提示框 实例
ahuan08的专栏
08-29 292
<!DOCTYPE HTML> <head> <title>提示框CSS实现</title> <meta charset="utf-8"> <style> .tp{ display:inline-block; } .tooltip{ visibility:hidden; background-color:orangered;...
单纯使用CSS实现动态提示信息.txt
12-12
在探讨如何仅使用CSS实现动态提示信息之前，我们先来理解一下这个概念的基本含义和应用场景。动态提示信息，通常指的是当用户将鼠标悬停在某个元素（如链接、按钮等）上时，会弹出一个包含额外信息的小窗口或气泡，...
提升表单易用性：CSS+JS实现动态提示文本
本文档主要探讨了如何利用JavaScript (JS) 和 CSS 实现更高级别的表单可用性增强，特别是通过提示文字的管理和美化。在设计表单时，常见的做法是使用`<input>`元素的`value`属性来提供提示信息，如在搜索框中显示"请...
javascript实现倒计时并弹窗提示特效
10-24
为了实现弹窗提示效果，可以使用JavaScript的定时器函数`setTimeout`或`setInterval`，在用户浏览到特定页面时触发弹窗显示倒计时剩余时间。倒计时结束后，弹窗可以自动消失，也可以让用户自行关闭。 在代码的最后...
一个比较漂亮的CSS仿系统的气泡信息提示窗口
02-13
一个比较漂亮的CSS仿系统的气泡信息提示窗口。
CSS自定义消息提示
weixin_33733810的博客
04-04 219
1.效果 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <style type="text/css"> #confirm{ position: absolut...
CSS消息数字提示
qq_38822390的博客
05-30 2672
今天写个简单的小demo，关于CSS实现头像右上角消息数字提示，样式如下如图所示，在微信和扣扣消息里面比较常见。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .alarm { ...
表单输入框添加提示信息
weixin_34124577的博客
06-25 1312
在表单的输入框为用户添加一些提示信息，对首次来访问的用户会有很好的作用，并且用户体验也会更好，一般的提示信息有： 搜索、输入搜索等。下面分享一个超精炼的方法来实现这个功能： <input type=’text’ value=’你想显示的提示信息’ onfoucs=”if(this.value==this.defaultValue) this.value=”;” onblur=”if(th...
CSS基础学习--20 提示工具(Tooltip)
yyxhzdm的博客
06-18 3362
提示工具在鼠标移动到指定元素后触发，总共四种样式实例： 提示框在鼠标移动到指定元素上显示 HTML- 使用容器元素 (like <div>) 并添加 "tooltip" 类。在鼠标移动到 <div> 上时显示提示信息。提示文本放在内联元素上(如 <span>) 并使用class="tooltiptext"。CSS-tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。 注意: 接下来的实例会显示更多的定位效果。tooltiptext
使用css3实现消息框
想要全栈chris的博客
03-18 2288
原理：使用css3中的transform：rotate旋转，通过定位改变位置。.out{ width: 300px; height: 150px; background-color: pink; margin:200px; position: relative; }
表单元素设置提示信息的属性_HTMLCSS学习笔记（二）-- HTML表单标签
weixin_32159409的博客
01-17 1532
表单1 ： 表单标签<form></form> 属性 ： action = '接口地址' method = 'get / post' name = '表单名称'2 ： 表单控件<input> 属性： type = '控件类型' name：属性标识表单域的名称； Va...
css弹出框 提示信息
稻香的专栏
03-19 3068
#alertBox{ position:absolute; display:none; width:100%; height:100%; left:0px; top:0px; z-index:99; background: rgba(255, 255, 255, 0.1);} #alertBox #alertBoxShadow{ position:absolute; width:200px; he
纯CSS实现小三角提示信息
LZUGIS
12-03 6428
纯CSS实现小三角提示信息
HTML+CSS实现动态六图旋转效果
这个简单的图片旋转代码演示了如何在Web开发中利用CSS3的3D变换和动画特性创建动态交互式图像展示，适合用于创建具有吸引力的网站或网页小应用。学习者可以通过这个示例了解如何在H5、CSS和JS环境下实现3D图片切换，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值