html tips 属性 after,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来制作，要怎么样制作？我想这者是大家今天最想关注的。那么我们就一起往下看吧。这方法可能你有熟悉，或者已经使用过。首先我们需要把需要把一段描述性的内容放在一个，这部分描述性内容就是我们所说的tips的内容，最主要的是在tips父元素中定义“relative”而其自身使用“absolute”定位。在下面你会看到一个简单而且适当的tips结构，此文我们就要使用是的CSS3的属性来制作一个cool的tips。比如说tips下面的三角形，我们就是使用":before"和":after"来制作的，如下图所示：

在本文中制作Tips我们还使用了CSS3的其他几个属性：

HTML Markup

Tips Title

Your tips description

为什么使用锚元素?

这里为什么使用元素来制作tips呢？这个其实不用我说大家都知道的。原因很简单，就是为了兼容性的原因。因为在IE6浏览器下“:hover”会有一个问题，他只支持元素，其的他的元素不具有“:hover”的不能使用。

如果你执意不想使用元素来制作tips效果，那么为了兼容IE6浏览器下的效果，你就需要使用下面的代码来解决IE6下的兼容问题，或者你也可以按照《浏览器兼容之旅的第四站:IE常见Bug——part2》介绍的来处理，此处我们就一起来看Red是如何处理的

处理:hover兼容的jQuery代码

$(function() {

if ($.browser.msie && $.browser.version.substr(0,1)<7)

{

$('.tooltip').mouseover(function(){

$(this).children('span').show();

}).mouseout(function(){

$(this).children('span').hide();

})

}

});

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》。使用我们也可以试试手，尝尝新了。如果您还有更好的方法，记得告诉我哟。

如需转载烦请注明出处：