`

CSS文本提示框

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>sample</title>
<style type="text/css" media="screen">
body {
font
-size:12px;
}
/* 链接按钮 3 */
.abtn_3 {
    font
-size:14px;
    line
-height:1em;
    background:url(http:
//www.moonless.net/i/sample.gif) no-repeat -33px -123px;
    text-decoration:none;
    position:relative;
}
.abtn_3 span {
    visibility:hidden;
    overflow:hidden;
}
.abtn_3:hover {
    text
-indent:0;
}
/* 提示框 */
.hintsB {
    display:none;
}
.abtn_3:hover .hintsB {
    display:block;
    position:absolute;
    top:
-1.3em;
    left:20px;
    width:180px;
    padding:
0 0 0 5px;
    background:url(http:
//www.moonless.net/i/sample.gif) no-repeat 0 center;
    color:#326324;
    cursor:text;
    font
-weight:normal;
}
@media all and (min
-width: 0px){ .abtn_3:hover .hintsB {top:auto;left:auto;} }
.abtn_3:hover .hintsB div {
    line
-height:18px;
    padding:7px 4px 6px 6px;
    border:1px solid #bed48f;
    border
-left:none;
    background
-color:#effaeb;
    font
-size:12px!important;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<a href="javascript:void(0);" class="abtn_3">
    
<span>提示</span>
    
<div class="hintsB">
        
<div>这里是提示内容哦!这里是提示内容哦!这里是提示内容哦!这里是提示内容哦!这里是提示内容哦!</div>
    
</div>
</a>

</body>
</html>
分享到:
评论

相关推荐

    纯css三角提示框

    接下来,要实现“带三角的提示框”,我们需要将这个三角形与一个带有文本的矩形框结合。这通常通过将三角形元素(一个伪元素,如`:before`或`:after`)与提示框元素(可能是`div`或`span`)定位来完成。通过设置绝对...

    js,css做的alert提示框

    在IT行业中,自定义的JavaScript和CSS Alert提示框是一种常见的用户交互设计,它允许开发者创造出与系统默认样式不同的警告、信息或确认对话框。本文将深入探讨如何利用这两种技术实现这样的功能。 首先,我们来看...

    不同css样式的消息提示框

    消息提示框的基本样式通常包括背景色、边框、内边距和文字对齐。使用CSS,我们可以定义`.alert`类作为基础样式,例如设置背景颜色为白色,边框为灰色,圆角为4px,以及合适的内边距和字体大小。 ```css .alert { ...

    css圆角提示框.zip

    【CSS圆角提示框】是一种常见的前端开发技术,主要用于创建具有视觉吸引力且用户体验良好的提示信息。在本案例中,我们看到的"css圆角提示框.zip"是一个包含纯HTML和CSS代码的压缩包,用于展示如何在不同浏览器上...

    7种纯CSS3搜索框UI设计效果

    使用`placeholder`属性可以在输入框内显示提示文字,而CSS3的`transition`和`opacity`属性可以使提示文字在聚焦和失去焦点时有平滑的淡入淡出效果,提高可读性和易用性。 5. **响应式设计** CSS3的媒体查询(`...

    CSS3提示框Tooltip动画.zip

    **CSS3提示框Tooltip动画详解** 在Web开发中,Tooltip是一种常见的交互元素,它用于提供额外的信息,当用户将鼠标悬停在特定元素上时显示。传统的Tooltip通常使用JavaScript实现,但随着CSS3特性的日益成熟,我们...

    css制作带箭头的css边框

    2. **提示框**:用于提示用户注意特定信息或操作时,增强交互性和美观性。 3. **内容区域划分**:为页面的不同部分划分边界,同时增加视觉效果。 4. **装饰元素**:为网站增添细节,提升整体设计感。 通过以上分析...

    css border实现Bubble提示框的方法

    根据需求,可以调整箭头的方向(向上、向左、向右)以及提示框的背景色、文字内容等。在实际应用中,还可以结合`box-shadow`添加阴影效果,增强视觉层次感,或者通过`transition`实现动画效果,增加用户体验。 总结...

    纯css3 animation动画属性点击loading加载动画提示框效果代码.zip

    在这个名为"纯css3 animation动画属性点击loading加载动画提示框效果代码.zip"的压缩包中,我们可以预见到一个利用CSS3的animation属性创建的交互式加载提示框的示例。 动画在现代网页设计中扮演着至关重要的角色,...

    CSS3文字菜单鼠标悬停气泡提示动画

    今天要给大家带来另外一款基于CSS3的文字菜单鼠标悬停气泡提示动画,它比较适合用在文字菜单上,当鼠标滑过菜单项时,你可以定义其弹出一个气泡提示框,可以是一个小图标。另外,这些气泡提示框在弹出的时候还会配合...

    jQuery CSS3提示框按钮过渡效果.zip

    【jQuery CSS3提示框按钮过渡效果】是一种网页交互设计技术,它结合了JavaScript库jQuery与CSS3的强大功能,为用户提供了一种动态且吸引人的提示框按钮体验。在网页设计中,这种过渡效果能够提升用户体验,使得用户...

    css实现Bubble提示框效果.rar

    一个简单的提示框可能由一个包含文本的`&lt;div&gt;`元素组成,该元素可能有一个特定的类名,如`.bubble`。例如: ```html 这是一条提示信息 ``` 接下来,我们使用CSS来定义`.bubble`的样式。这通常包括设置位置、尺寸、...

    js+css实现点击弹出提示框

    这段CSS代码设置了提示框的定位、边框、内边距、阴影效果以及关闭按钮的样式,使其在页面中央显示并具有一定的视觉吸引力。 最后,我们需要编写JavaScript(在`scripts.js`文件中)来处理用户的点击事件和提示框的...

    12种利用html5+css3打造的消息提示框效果

    在这个“12种利用html5+css3打造的消息提示框效果”中,我们可以看到如何巧妙地运用这两种技术来构建多样化的通知和提示组件。 1. **HTML5**:HTML5是超文本标记语言的最新版本,它引入了许多新元素,如`&lt;section&gt;`...

    3种简单的css3鼠标悬停帮助图标显示图片文字提示框代码

    在这个主题中,我们将探讨三种简单的CSS3方法,用于在鼠标悬停帮助图标时显示图片和文字提示框。这将有助于提升用户对网站内容的理解,增强其互动性。 首先,我们来看第一种方法:使用伪类`:hover`和`&lt;img&gt;`元素。`...

    纯CSS实现tips帮助提示框代码.zip

    "纯CSS实现tips帮助提示框代码"是一个专为网页开发者设计的资源,它允许你创建交互式的提示框,无需依赖JavaScript,只用CSS就能实现。这在优化页面加载速度和降低复杂性方面具有显著优势。 首先,我们要理解CSS...

    JS+CSS实现一个气泡提示框

    要实现一个气泡提示框,需要结合JavaScript和CSS的相关技术。本文将分别从鼠标事件处理、纯CSS三角形制作这两个关键技术点,以及相关的HTML结构来介绍如何创建一个功能完整的气泡提示框。 首先,涉及到的JavaScript...

    js提示框制作js文字提示框,js图片提示框

    本教程将详细介绍如何使用JavaScript创建文字提示框和图片提示框。 1. **基本的JavaScript提示框:alert()** JavaScript 提供了 `alert()` 函数,用于弹出一个带有单一按钮的警告对话框,通常用于简单的信息提示。...

    jQuery+CSS3登陆框 附加密码强度指示器

    密码强度指示器通常通过改变背景颜色、文字提示或者进度条等形式展示。我们可以使用CSS3的伪类和过渡效果来创建平滑的视觉变化。例如,用渐变背景和不同颜色表示不同的强度等级: ```css #password-strength { ...

    CSS小练习01-PS提示框

    在本“CSS小练习01-PS提示框”中,我们将深入探讨如何使用CSS来创建类似于Photoshop(PS)中的提示框效果。CSS,即层叠样式表,是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的Web标准语言。这个...

Global site tag (gtag.js) - Google Analytics