大连仟亿科技
客服中心
  • 电话
  • 电话咨询:0411-39943997
  • 手机
  • 手机咨询:15840979770
    手机咨询:13889672791
网络营销 >更多
您现在的位置:仟亿科技 > 新闻中心 > 常见问题

网页设计非JS用CSS实现hover显示题目结果

作者:billionnet 发布于:2012/2/22 18:10:37 点击量:

  

我们可以经由过程CSS3殊效来实现悬停弹出结果。这是一个有趣的工作,让我们放弃了更多的JS。然则,很多时辰我们都忘怀了CSS2.1给我们带来的美好结果。因为它具有很是好的浏览器支撑,我们可以做很多殊效以便兼容今朝所有主流浏览器。


在本教程中,我们将会哄骗CSS2.1属性创建灵活进步前辈的悬停殊效。


其实教程很简单:


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


但如今、经由过程下面的例子,我们会学到此中最有魅力的一种属性,经由过程它,我们可以实现更多更酷的殊效。


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


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


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


1、创建内容代码:


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


鄙人面的例子里,我们将应用(attr())函数来标识表记标帜提取显示内容的标签。


ul a:hover:after
{
    content: attr(title);
}


  •    

            Beautiful sunrise
       



  • 从上方可以看到,应用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来定义绝对地位并赐与它高度、靠山,行间距(这个与高度雷同,所以我们定义将文本垂直居中)。


    我们还可以同样来定义(: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; }

     



    分享到:


    评论加载中...
    内容:
    评论者: 验证码:
      

    Copyright@ 2011-2017 版权所有:大连仟亿科技有限公司 辽ICP备11013762-1号   google网站地图   百度网站地图   网站地图

    公司地址:大连市沙河口区中山路692号辰熙星海国际2215 客服电话:0411-39943997 QQ:2088827823 42286563

    法律声明:未经许可,任何模仿本站模板、转载本站内容等行为者,本站保留追究其法律责任的权利! 隐私权政策声明