整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS悬停效果

SS悬停效果,鼠标移上去的时候,中间出现一条切线,然后消失。将内容区分成左右两边,效果如下:

代码:

html:

css:

标悬停提示是指当鼠标悬停在某一元素上时浏览器弹出的黄色小文本框,一般开发者大多会结合Javascript创建各式各样的自定义提示,其实通过CSS定位也可以实现,首先我们看一下效果图:

接下来我们详细介绍它的实现方法:

  1. 首先创建一个简单的带链接的HTML(根据自己的需要),在链接显示的文本后面添加需要提示的内容并置于span标签中(加粗部分)

    <p>

    <a href="www.laosiji.com" style="text-decoration:none">www.你懂的.com<span>(未满18周岁请勿点击)</span></a> is a Horror Movies Website.

    </p>

  2. 接下来是关键部分,先将链接的position属性设置为relative,因为<a>是<span>的父级元素,这样接下来才可以让<span>中的提示内容根据<a>中的链接文本进行绝对定位。<span>中的提示内容我们不希望它一开始就显示出来,所以要将它的display属性设置为none.

    a{position:relative;}

    a span{display:none;}

  3. 当鼠标悬停在链接上时我们希望显示出span中的提示内容,这时就需要将span的display属性设置为block,为了让其出现在链接的右下方,需要将span的position属性设置为absolute,并设置一定的距离(顶部1em,左边2em).

    a{position:relative;}

    a span{display:none;}

    a:hover span{display:block;

    position:absolute;top:1em;left:2em;}

  4. 前两步基已经完成了本次案例的主体,剩下的就是给span添加一些样式,让它看起来更像是提示。可以添加一些内边距 边框和背景颜色等。

    <style type="text/css">

    a{position:relative;}

    a span{display:none;}

    a:hover span{display:block;

    position:absolute;top:1em;left:2em;

    width:160px;

    padding:0.2em 0.6em;

    border:1px solid #996633;

    background-color:#FFFF66;

    color:red;}

    </style>

    PS:最后科普一下display:none与visible:hidden的区别

    display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

    visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。

停第一步,先上效果图

这个其实是一个bootstrap实现的响应式导航,我们今儿要做的了其实是鼠标hover效果,看到那些个Home、About us...底下的三个小点点没有,这个就是一个sex的效果,鼠标移上会有仨点点,而这仨点点呢又不是一下子出来的,是从中间点点往两边散开 形成三个

好了上代码,html导航的结构就不用多说了把,ul li,相信你可以的

这里呢看到好多类是不是,因为用的是bootstrap的结构写的,平时静态的话其实不用那么复杂

结构不多说,主要说下下面点点的实现,我们得用上:before,当然也有::before,其实一个冒号跟两个冒号没有本质的区别,都是表示在什么什么之前,他这么写主要只是为了区分css2和css3,也就是ie和主流浏览器。双冒号的话貌似只兼容火狐谷歌等,不考虑ie。

然后呢 我们需要这个before先再内容下面用定位实现一个点点,然后用css3的文字阴影去实现两边的点点

自行理解哈,若有疑问可去142991222找小姐姐我

好了 上完整的代码

至于我样张图上的效果,请听下回分解。哈哈哈,或者你来逼供也行142991222