css span提示框 练习(不能用div)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="style/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js.js"></script>
    <style type="text/css">

    </style>
    <script type="text/javascript">

    </script>
</head>
<body>
<div>
    <h1>上下文增加内容,方便测试位移</h1>
    <p>增加内容方便测试位移:鼠标<a href="#">悬浮<span>鼠标悬浮提示鼠标悬浮提示鼠标悬浮提示鼠标悬浮提示鼠标悬浮提示</span></a>提示练习测试</p>
    <h2>上下文增加内容,方便测试位移</h2>
</div>
</body>
</html>
span{
    display: none;
}
a{
    text-decoration: none;
    font-weight: bold;
    color: red;
    position: relative;
}
a:hover span{
    border: 1px solid black;
    display: block;
    position: absolute;
    background: #ffffff;
    width:120px;
    height: 120px;
    margin:4px 0 0 10px;
    padding:8px;
}

css span提示框 练习(不能用div)

时间: 2024-10-03 11:19:31

css span提示框 练习(不能用div)的相关文章

支持鼠标跟随的JS+CSS链接提示框

觉得纯css的tips限制有点大,而且好像兼容性也不好,这是我发现的一个Js+CSS的链接提示框效果,还会跟随鼠标而移动,而且兼容性也不错,代码与大家分享:前端分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

纯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-Typ

css 气泡提示框

知识点整理之css气泡框 1.气泡框构成——三角形箭头+容器 其中 三角形的实现:上下左右四个方向的三角形实现方式: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>上下左右三角形</title> 6 <sty

纯css三角提示框,兼容IE8

利用border属性实现 .messageBox{ position: relative; width: 240px; height: 60px; line-height: 60px; background: #e9fbe4; border: 1px solid #c9e9c0; border-radius: 4px; text-align: center; color: #0c7823; } .triangleBorder{ position: absolute; left: 30px; ov

纯css来实现提示框

用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用title属性时,提示框的样式是默认的,而利用自定义的data-title属性时,提示框的样式和位置自己可以随意定义), 首先,要将鼠标需要悬浮的元素相对定位, 再次,利用hover和伪类的绝对定位来显示提示的内容 代码如下: 1 <!DOCTYPE html> 2 <html lang=&

如何使用CSS创建巧妙的动画提示框

原文:https://webdesign.tutsplus.co...原作:Jase Smith翻译:Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时,亦或是当他们在点击了按钮之后需要确认自己没点错时,又或是带图片和字幕的复活节彩蛋,提示框是用来增强用户界面的绝佳手段.现在,让我们来做几个动画提示框,没有别的,只有HTML和CSS. 样例 这是我们之后要做的: http://jsfiddle.net/kcschaefe... 在我们沉浸在写代码的过程中之前,让我们先来看看我们的意

jQuery mobile 学习06 提示框和确认框

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

可自定义配置箭头的CSS3气泡提示框

今天我们要来分享一款基于纯CSS的气泡提示框,和之前分享的一款jQuery消息提示框插件Tipso类似,整个提示框由箭头和矩形框组成,并且气泡提示框的箭头可以有不同的方向.这款CSS气泡提示框由纯CSS完成,最大的特点就是可以自定义配置,包括文字颜色.背景颜色和箭头方向等.效果图如下: 在线预览   源码下载 实现的代码. css代码: .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5;

利用 css 制作简单的提示框

在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和absolute可以快速制作这样的一个提示框,想详细了解,点击这里 html代码: <div id="position"> <div class="position-relative"> <span>提示信息</span> &l