CSS3 Tips
今天主要和大家一起学习Red写的《CSS3 tooltips》。从里面我们一起来学习如何使用CSS3来制作tips。
大家都知道，有时我们在web的页面制作中，需要使用另外的方法来解说其中的一个词或一张图片等，那么我们把这种称作为tips。那什么为要使用tips呢？很好回答，因为使用tips能提高你的网站的可用性，增强你网站的交互力。那么现在开始我们跟着Red大神来学习制作没有图片，没有js的tips。如：
我们需要CSS的tips?
你或许会问，我们需要CSS的tips？在HTML中有一个属性“title”，他也可以起到提示作用，我们完全可以使用这个属性来制作提示效果。但是这个默认的提示效果，我们无法给其进行任何样式的修改。如果你要制作出一个好看的，很帅的tips，一个你想的要风格的tips时，你就需要使用css来制作tips，这样才能解决。
如何制作Tips？
使用CSS来制作，要怎么样制作？我想这者是大家今天最想关注的。那么我们就一起往下看吧。这方法可能你有熟悉，或者已经使用过。首先我们需要把需要把一段描述性的内容放在一个<span>，这部分描述性内容就是我们所说的tips的内容，最主要的是在tips父元素中定义“relative”而其自身使用“absolute”定位。在下面你会看到一个简单而且适当的tips结构，此文我们就要使用是的CSS3的属性来制作一个cool的tips。比如说tips下面的三角形，我们就是使用":before"和":after"来制作的，如下图所示：
在本文中制作Tips我们还使用了CSS3的其他几个属性：
- 渐变背景——《CSS3 Gradients》
- 阴影效果——《CSS3 Box-shadow》
- Tips的圆角——《CSS3 Border-radius》
- css3的伪元素制作三角制作——《CSS3 选择器——伪类选择器》
HTML Markup
<a href="#" class="tips"> Tips Title <span>Your tips description</span> </a>
为什么使用锚元素<a>?
这里为什么使用<a>元素来制作tips呢？这个其实不用我说大家都知道的。原因很简单，就是为了兼容性的原因。因为在IE6浏览器下“:hover”会有一个问题，他只支持<a>元素，其的他的元素不具有“:hover”的不能使用。
如果你执意不想使用<a>元素来制作tips效果，那么为了兼容IE6浏览器下的效果，你就需要使用下面的代码来解决IE6下的兼容问题，或者你也可以按照《浏览器兼容之旅的第四站:IE常见Bug——part2》介绍的来处理，此处我们就一起来看Red是如何处理的
处理:hover兼容的jQuery代码
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('.tooltip').mouseover(function(){
$(this).children('span').show();
}).mouseout(function(){
$(this).children('span').hide();
})
}
});
</script>
CSS CODE
.tips{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}
.tips span {
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tips:hover{
border: 0; /* IE6 fix */
}
.tips:hover span{
visibility: visible;
}
.tips span:before,
.tips span:after {
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tips span:before{
border-top-color: #ccc;
bottom: -8px;
}
浏览器都兼容？
这个效果兼容所有浏览器，只是在IE6-8会有点不一样，因为我们此处使用了CSS3的渐变来制作的背景。在IE6-8下根本无法支持，不过大家也可以使用滤镜来解决。
使用CSS3制作Tips就是这么简单，当然你还可以制作不同色的tips，你只需要在其基础上增加一个其他颜色的类名，然后改变其背景色，就如Red给我们提供的DEMO。
如何？简单吧。学会了吗？要是还没有整明白就自己动动手吧，这样一下子你就明白了。最后再次感谢Red给我们带来《CSS3 tooltips》。使用我们也可以试试手，尝尝新了。如果您还有更好的方法，记得告诉我哟。
如需转载烦请注明出处：W3CPLUS
Cheap Air Jordan 1-001