摘要:本文的内容为使用与来创建提示工具,提示工具在鼠标移动到指定元素后触发。这个提示工具可以使我们排出的网页增加美感,也可以提升用户的可读性。
本文的内容为使用 HTML 与 CSS 来创建提示工具,提示工具在鼠标移动到指定元素后触发。这个提示工具可以使我们排出的网页增加美感,也可以提升用户的可读性。(提示工具可以四周提示这里只演示上和右,左和下的同理调调距离就可以实现了) 一、提示内容在上面 1<效果图敬上> 2<代码敬上>
</>复制代码
显示
qwert
qwertadsfadfa
qwert
qwert
qwert
qwert
qwert
body{
margin:0;
text-align:center;
}
.q{
display:inline-block;
position:relative;
}
.w{
padding:15px;
display:inline-block;
background-color:green;
color:white;
}
.q:hover .neirong{
/* display:block; */
opacity:1;
transition:1s;
}
.neirong{
/* display:none; */
opacity:0;
background:#666;
color:white;
border-radius:5px;
position:absolute;
text-align:center;
left:-130%;
top:18%;
min-width:100px;
margin-left:70%;
padding:15px;
}
.jiantou{
width:0px;
height:0px;
border:10px solid;
border-color:#666 transparent transparent transparent;
margin:0 auto;
position:absolute;
top:177px;
left:40%;
}
(还在新手阶段代码有点恶心见谅)
一、提示内容在右面 1<效果图敬上> 2<代码敬上></>复制代码
显示
qwert
qwertadsfadfasdasdd
qwert
qwert
qwert
qwert
qwert
body{
margin:0;
text-align:center;
}
.q{
display:inline-block;
position:relative;
}
.w{
padding:15px;
display:inline-block;
background-color:green;
color:white;
}
.q:hover .neirong{
/* display:block; */
opacity:1;
transition:1s;
}
.neirong{
/* display:none; */
opacity:0;
background:#666;
color:white;
border-radius:5px;
position:absolute;
text-align:center;
left:60%;
top:5%;
min-width:100px;
margin-left:60%;
padding:15px;
}
.jiantou{
width:0px;
height:0px;
border:10px solid;
border-color:transparent #666 transparent transparent;
margin:0 auto;
position:absolute;
top:70px;
left:-10%;
}
(还在新手阶段代码有点恶心见谅)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/116900.html
摘要:提示工具本文为大家介绍如何使用和来实现提示工具,提示工具在鼠标移动到制定元素后触发先看下面示例基础提示工具代码如下右提示工具右提示工具提示工具运行结果如下图添加箭头我们可以用伪元素及属性为提示工具创建一个小箭头标志,箭头是 CSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具, 提示工具在鼠标移动到制定元素后触发,先看下面示例: showImg(ht...
摘要:提示工具本文为大家介绍如何使用和来实现提示工具,提示工具在鼠标移动到制定元素后触发先看下面示例基础提示工具代码如下右提示工具右提示工具提示工具运行结果如下图添加箭头我们可以用伪元素及属性为提示工具创建一个小箭头标志,箭头是 CSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具, 提示工具在鼠标移动到制定元素后触发,先看下面示例: showImg(ht...
摘要:我们巧妙的提示框打算使用属性选择器也就是方括号表示法。相对性这是用在提示框的父元素上的。向上向下提示框要用到关键帧,而向左向右提示框使用关键帧。注意,在这些关键帧中,我们只定义了提示框所需的终止状态。 原文:https://webdesign.tutsplus.co...原作:Jase Smith翻译:Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时,亦或是当他们在点击...
阅读 1051·2021-11-22 13:53
阅读 2664·2021-10-15 09:40
阅读 1162·2021-10-14 09:42
阅读 3991·2021-09-22 15:59
阅读 985·2021-09-02 09:47
阅读 2702·2019-08-30 15:54
阅读 1521·2019-08-29 17:14
阅读 525·2019-08-29 15:15