前端技巧CSS实现鼠标指向问号图标出现帮助信息

CSS实现鼠标指向问号图标出现帮助信息

经常在一些网站上看到类似问号的小图标,鼠标指向的时候会出现提示信息或帮助信息,这样的提示信息对用户很友好,而实现这种效果的方法有很多,本文介绍最简单的一种纯CSS做法,先来做个示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
.wrap {margin:40px;padding:25px;
 width:430px;height:110px;
 background:#f1f1f1;
 position:relative;
}
</style>
</head>
<body>
<div class="wrap">
 <div class="help-tip">
   <p>中国风音乐是建立在中国传统文化的基础上,蕴含大量中国元素的音乐表现形式</p> 
 </div> 
 <div class="text">
周杰伦中国风的歌曲:东风破、发如雪、青花瓷、雨下一整晚、兰亭序、千里之外、红尘客栈等……
 </div>
</div>
</body>
</html>

这里help-tip中p标签内的文字属于帮助信息,text中的内容属于正文内容,为了方便问号小图标的定位,我给外层父元素设置了position:relative,下面先来做一个问号小图标:

.help-tip {
 width:24px;height:24px;line-height:24px;
 font-size:14px;text-align:center;
 background-color:#666;border-radius:50%;
 position:absolute;top:80px;right:25px;
 cursor:default;
}

这里制作了一个小圆形图案,并通过定位的方式将小圆形定位到想要的位置。

.help-tip:before{content:"?";font-weight:bold;color:#fff;}

这里通过伪类属性增加一个问号到这个小圆形内,接下来设置提示信息框的样式:

.help-tip p {
 display:none;text-align:left;
 background-color:#333;color:#fff;
 padding:20px;width:320px;
 position:absolute;right:0;
 border-radius:3px;
 font-size:14px;line-height:1.5;
}

这里设置了display:none属性使提示框默认隐藏,接下来设置鼠标指向小问号时提示框显示:

.help-tip:hover p{display:block;}

这样鼠标指向这个小问号图标就出现提示框了:

鼠标指向出现帮助信息.png

不过为了让效果不那么生硬,可以适当加上渐变的效果,首先定义一个渐变的动画:

@keyframes fadein {0% {opacity:0;} 100% {opacity:100%;}}

将这个动画应用到鼠标指向小问号时的属性上:

.help-tip:hover p{animation:fadein 1s;}

经过整理,综合起来的网页代码为:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
.wrap {
    margin:40px;
    padding:25px;
    width:430px;
    height:110px;
    background:#f1f1f1;
    position:relative;
}
.help-tip {
    width:24px;
    height:24px;
    line-height:24px;
    font-size:14px;
    text-align:center;
    background-color:#666;
    border-radius:50%;
    position:absolute;
    top:80px;
    right:25px;
    cursor:default;
}
.help-tip:before {
    content:"?";
    font-weight:bold;
    color:#fff;
}
.help-tip p {
    display:none;
    text-align:left;
    background-color:#333;
    color:#fff;
    padding:20px;
    width:320px;
    position:absolute;
    right:0;
    border-radius:3px;
    font-size:14px;
    line-height:1.5;
}
.help-tip:hover p {
    display:block;
    animation:fadein 1s;
}
@keyframes fadein {
    0% {
      opacity:0;
    }
    100% {
      opacity:100%;
    }
}
</style>
</head>
<body>
<div class="wrap">
 <div class="help-tip">
   <p>中国风音乐是建立在中国传统文化的基础上,蕴含大量中国元素的音乐表现形式</p> 
 </div> 
 <div class="text">
周杰伦中国风的歌曲:东风破、发如雪、青花瓷、雨下一整晚、兰亭序、千里之外、红尘客栈等……
 </div>
</div>
</body>
</html>

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/92.html