10-2·100 css提示工具,鼠标滑过提示文字

 

    

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提示工具 鼠标滑过提示文字</title>
    <style>
        /* tooltip容器 */
        .tooltip {
            position: relative;
            display: inline-block;
            /*  */
            border-bottom: 1px dotted black;
            /* 悬停元素上显示点线  */
        }

        /* tooltip 文本 */
        .tooltip .tooltipdemo {
            visibility: hidden;
            /* 宽度 */
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px;
            /* 定位 */
            position: absolute;
            z-index: 1;
        }

        /* 鼠标移动上去后显示提示框 */
        .tooltip:hover .tooltipdemo {
            visibility: visible;
        }
    </style>
</head>

<body style="text-align: center;">
    <div class="tooltip">鼠标移动到这
        <span class="tooltipdemo">提示文本</span>
    </div>
</body>

</html>

效果

     

 

推荐这些文章:

15-2·100 css 什么是浮动

 
   

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo 模板</title>
...

9-2·100 css下拉菜单

 
   

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
...

6-2·100 css伪类 链接鼠标滑过变颜色

 
   

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类 链接鼠标滑过效果</title&g...

11-2·100 单行文字垂直居中

 
  

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直居中</title>
&...

1-2·100 css 尺寸图像的宽高设置

   
  

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>尺寸 图像设置</title...

24-2·100 HTML相对路径

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo模板</title>
</head>
<...

23-2·100 图像标签

 
 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo模板</title>
</head&...

89-100 jQuery新浪菜单下拉(鼠标滑过显示内容效果)

 
  

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
...

95-100 css表格宽高度设置案例

  
   

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 表格 </title...

css-众所周知,类选择>标签选择

但是,
.类 标签>.类
类选择+标签选择  的优先级大于  类选择
例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<ti...

文章标题:10-2·100 css提示工具,鼠标滑过提示文字
文章链接:https://www.dianjilingqu.com/51409.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>