资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS 提示工具(Tooltip)

CSS 提示工具(Tooltip)

ACb0y / 2701人阅读

摘要：本文的内容为使用与来创建提示工具，提示工具在鼠标移动到指定元素后触发。这个提示工具可以使我们排出的网页增加美感，也可以提升用户的可读性。

本文的内容为使用 HTML 与 CSS 来创建提示工具，提示工具在鼠标移动到指定元素后触发。这个提示工具可以使我们排出的网页增加美感，也可以提升用户的可读性。（提示工具可以四周提示这里只演示上和右，左和下的同理调调距离就可以实现了） 一、提示内容在上面 1<效果图敬上>

2<代码敬上> 
</>复制代码 
  2.     
  3.     
  4.     
  5.     
  6.         
  7.         
  8.         
  9.         
  10.         
  11.         
  12.         
  13.         
  14.         
  15.         
  16.         
  17.         
  18.         显示
  19.         
  20.         
  21.         qwert
  22.         qwertadsfadfa
  23.         qwert
  24.         qwert
  25.         qwert
  26.         qwert
  27.         qwert
  28.         
  29.     
  30. body{
  31.     margin:0;
  32.     text-align:center;
  33. }
  34. .q{
  35.     
  36.     display:inline-block;
  37.     position:relative;
  38. }
  39. .w{
  40.     
  41.     padding:15px;
  42.     display:inline-block;
  43.     background-color:green;
  44.     color:white;
  45. }
  46. .q:hover .neirong{
  47.     /* display:block; */
  48.     opacity:1;
  49.     transition:1s;
  50. }
  51. .neirong{
  52.     /* display:none; */
  53.     opacity:0;
  54.     
  55.     background:#666;
  56.     color:white;
  57.     
  58.     border-radius:5px;
  59.     
  60.     position:absolute;
  61.     text-align:center;
  62.     left:-130%;
  63.     top:18%;
  64.     
  65.     min-width:100px;
  66.     
  67.     margin-left:70%;
  68.     
  69.     padding:15px;
  70.     
  71. }
  72. .jiantou{
  73.     width:0px;
  74.     height:0px;
  75.     
  76.     border:10px solid;
  77.     border-color:#666 transparent transparent transparent;
  78.     
  79.     margin:0 auto;
  80.     
  81.     position:absolute;
  82.     top:177px;
  83.     left:40%;
  84.     
  85.     
  86.     
  87. }

（还在新手阶段代码有点恶心见谅）

一、提示内容在右面 1<效果图敬上>

2<代码敬上> 
</>复制代码 
  2.     
  3.     
  4.     
  5.     
  6.         
  7.         
  8.         
  9.         
  10.         显示
  11.         
  12.         
  13.         qwert
  14.         qwertadsfadfasdasdd
  15.         qwert
  16.         qwert
  17.         qwert
  18.         qwert
  19.         qwert
  20.         
  21.     
  22. body{
  23.     margin:0;
  24.     text-align:center;
  25. }
  26. .q{
  27.     
  28.     display:inline-block;
  29.     position:relative;
  30. }
  31. .w{
  32.     padding:15px;
  33.     display:inline-block;
  34.     background-color:green;
  35.     color:white;
  36.    
  37. }
  38. .q:hover .neirong{
  39.     /* display:block; */
  40.     opacity:1;
  41.     transition:1s;
  42. }
  43. .neirong{
  44.     /* display:none; */
  45.     opacity:0;
  46.     
  47.     background:#666;
  48.     color:white;
  49.     
  50.     border-radius:5px;
  51.     
  52.     position:absolute;
  53.     text-align:center;
  54.     left:60%;
  55.     top:5%;
  56.     
  57.     min-width:100px;
  58.     
  59.     margin-left:60%;
  60.     
  61.     padding:15px;
  62.     
  63.     
  64. }
  65. .jiantou{
  66.     width:0px;
  67.     height:0px;
  68.     
  69.     border:10px solid;
  70.     border-color:transparent #666 transparent transparent;
  71.     
  72.     margin:0 auto;
  73.     
  74.     position:absolute;
  75.     top:70px;
  76.     left:-10%;
  77.     
  78.     
  79.     
  80. }

（还在新手阶段代码有点恶心见谅）

GPU云服务器 云服务器 tooltip提示 提示工具 css工具 css开发工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116900.html

相关文章

  • css--提示工具

    摘要：一提示工具上提示工具代码如下上提示工具提示文本运行结果二右提示工具代码如下提示工具右提示工具提示文本运行结果总结使用容器元素并添加类。在鼠标移动到上时显示提示信息。属性用于为提示框添加圆角。 一、提示工具 1、上提示工具 代码如下 body{ margin:0; text-align:center; ...

    shadajin 评论0 收藏0

  • css--提示工具

    摘要：一提示工具上提示工具代码如下上提示工具提示文本运行结果二右提示工具代码如下提示工具右提示工具提示文本运行结果总结使用容器元素并添加类。在鼠标移动到上时显示提示信息。属性用于为提示框添加圆角。 一、提示工具 1、上提示工具 代码如下 body{ margin:0; text-align:center; ...

    xinhaip 评论0 收藏0

  • CSS 提示工具(Tooltip)

    摘要：提示工具本文为大家介绍如何使用和来实现提示工具，提示工具在鼠标移动到制定元素后触发先看下面示例基础提示工具代码如下右提示工具右提示工具提示工具运行结果如下图添加箭头我们可以用伪元素及属性为提示工具创建一个小箭头标志，箭头是 CSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具， 提示工具在鼠标移动到制定元素后触发,先看下面示例： showImg(ht...

    cc17 评论0 收藏0

  • CSS 提示工具(Tooltip)

    摘要：提示工具本文为大家介绍如何使用和来实现提示工具，提示工具在鼠标移动到制定元素后触发先看下面示例基础提示工具代码如下右提示工具右提示工具提示工具运行结果如下图添加箭头我们可以用伪元素及属性为提示工具创建一个小箭头标志，箭头是 CSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具， 提示工具在鼠标移动到制定元素后触发,先看下面示例： showImg(ht...

    Shisui 评论0 收藏0

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

    摘要：我们巧妙的提示框打算使用属性选择器也就是方括号表示法。相对性这是用在提示框的父元素上的。向上向下提示框要用到关键帧，而向左向右提示框使用关键帧。注意，在这些关键帧中，我们只定义了提示框所需的终止状态。 原文：https://webdesign.tutsplus.co...原作：Jase Smith翻译：Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时，亦或是当他们在点击...

    wmui 评论0 收藏0

发表评论

登陆后可评论

0条评论

ACb0y

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<