专注于网站建设和搭建网络营销体系
商视互联,北京做网站公司
北京做网站,商视互联 您的位置:网站首页 > 商视动态 > 网页设计 > 正文
非JS用CSS实现hover显示标题效果
作者:商视互联   来源:商视互联   日期:2012/3/26 14:48:31   热度:℃   [ 标签:网页设计 ]

现在,我们可以通过CSS3特效来实现悬停弹出效果。这是一个有趣的事情,让我们放弃了更多的JS。但是,很多时候我们都忘记了CSS2.1给我们带来的美好效果。因为它具有非常好的浏览器支持,我们可以做很多特效以便兼容目前所有主流浏览器。

在本教程中,我们将会利用CSS2.1属?#28304;?#24314;灵活先进的悬停特效。

其实教程很简单:

当我们初学css的时候,我们知道“:hover”元素只限于去除链接的下划线而已。

但现在、通过下面的例子,我们会学到其中最有魅力的一种属性,通过它,我们可以实现更多更酷的特效。

一个很cool的特效就是创建图像的顶部显示标题文本,为用户创造一些好的视觉反馈,当鼠标滑动到图像时显示一些有关图像的信息。

精明的读者会发现这项技术具有巨大的潜力,当鼠标悬停在超链接时,如显示CSS工具提示。

我们会使用这些关键的CSS属性,伪类,并伪元素来完成我们的特效:

1、创建内容代码:

CSS代码允许我们追加(:after)或是预加(:before)内容。用于动态内容及静态内容(attr()),图像(url())和计数内容(counter())属性。

在下面的例子里,我们将使用(attr())函数来标记提取显示内容的<a>标签。

ul a:hover:after
{
    content: attr(title);
}
<li>
    <a href="#" title="Sunrise on the farm">
        <img src="img01.jpg" width="200" height="206" alt="Beautiful sunrise" />
    </a>
</li>

从上面可以看到,使用content属性允许我们把“title”追加到内容之后。

2、美化让其更好看:

现在,我们要做就是调整hover/focus的在图像后面的位置,用CSS来实现让他浮于图像上方。

首先,我们需要创建一个list容器。主要用来确定相对位置,并允许在这个list容器插入绝对位置的单元。

下面只代码:

ul > li {
    position: relative;
    float: left;
    list-style: none;
    margin: 0 20px 20px 0;
    font-size: 10px;
}

添加更多样式到(:hover),我们用CSS来定义绝对位置并给予它高度、背景,行间距(这个与高度相同,所以我们定义将文本垂?#26412;?#20013;)。

我们还可以同样来定义(:focus),不通过鼠标也能获得更好体验。

ul a:hover:after,
ul a:focus:after
{
    background: rgb(255,255,255);
    bottom: 2px;
    content: attr(title);
    color: #000;
    display: block;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    width: 100%;
}

我们还可以通过添加(outline)属性来给图像创建一个边框特效。

为什么我们不用(border)属性是因为(outline)不会影响相关对象,而(border)则会影响。

ul a:hover img, ul a:focus img { outline: 3px solid #ccc; }

我们现在有一个简单而有效的字幕叠加,用一些简单的CSS来创建有效的显示。

3、延展到更多方面:

现在我们有一个简单的字幕覆盖不错,但是我们怎么样添加一些额外的样式,这样我们可以通过添加几行CSS来更改标题的位置?

我们将创建一个(.reverse)属性来指定对象元素位置,是元素重新定位到显示图像的顶部而不是底部。

ul a.reverse:hover:after,
ul a.reverse:focus:after { top: 0px; }

我们还可以创建一个(.offset)属性来定义居中位置。原理是使用负距拉到中间。

ul a.offset:hover:after,
ul a.offset:focus:after { top: 50%; margin-top: -15px; }


本文网址:
更多

切尔西欧联夺冠整容
红色mg网站多少 湖北福彩楚天30选5开奖 牛牛有没有单机版的 7星彩走势图最近500期 欧足联排名表 怎么制作棋牌游戏平台 pc蛋蛋靠什么开奖 f老时时杀号定胆 靠谱的河北时时官网 广西快乐十分今天开奖结果一 20选五5开奖结果浙江 快乐时时计划 vr赛车座椅 刺激牛牛国产免费视频 分分彩稳赚长期 11选五开奖结果走势图天津