利用:hover伪类实现鼠标指向区块滑出小提示效果

2017-3-16 17:21 来自本站原创 11,590 8 0
[摘要]

本文利用css中:hover伪类实现将鼠标指向某区块时,区块内部滑出小提示效果,应用场景如广告上招商功能,一起来看一下。

之前在某个平台发现了一个很有趣的效果,广告上有一个小按钮,当鼠标指向广告的时候,小按钮处侧滑出一个文本提示“也想在这里显示?联系我们吧”这种类似于“百度联盟图加wap”版的效果瞬间让我觉得体验很棒,还能够起到“招商”的效果。当时准备拔下来,却发现人家启用了防扒代码功能,一时间就没能达成。

后想一下无非是利用css中:hover伪类,起初文本提示框处于隐藏状态,在鼠标指向外部div时,触发hover效果,然后利用:hover伪类后面加上文本框的类,使其显示出来。

具体效果如下图,未指向鼠标的时候仅显示一个小圆点,鼠标指向区块的时候,文本框滑出来。

利用:hover伪类实现鼠标指向区块滑出小提示效果

鼠标未指向提示框隐藏

利用:hover伪类实现鼠标指向区块滑出小提示效果

鼠标放到区块上时滑出提示框

demo代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>鼠标指向区块滑出小提示效果</title>
 <style type="text/css">
 *{margin: 0;padding: 0;border: 0;}
 .ad{
 width: 440px;
 height: 330px;
 margin: 100px auto 0;
 background-color: #eee;
 position: relative;
 }
 .ad .tips{
 position: absolute;
 right: 50px;
 top: 255px;
 }
 .ad .tips i{
 position: relative;
 display: inline-block;
 width: 20px;
 height: 20px;
 background-color: #2f889a;
 border-radius: 50%;
 color: #fff;
 font-weight: bold;
 text-align: center;
 font-style: normal;
 z-index: 9;
 }
 .ad .tips .text{
 position: absolute;
 bottom: 0;
 right: 5px;
 width: 0;
 padding: 5px 0;
 overflow: hidden;
 background: #2f889a;
 border-radius: 10px;
 line-height: 10px;
 text-align: center;
 font-size: 10px;
 color: #fff;
 white-space: nowrap;
 }
 .ad:hover .text{
 width: auto;
 padding: 5px 15px 5px 10px;
 -webkit-transition: all .2s cubic-bezier(0,.34,.71,1.26)!important;
 -moz-transition: all .2s cubic-bezier(0,.34,.71,1.26)!important;
 -ms-transition: all .2s cubic-bezier(0,.34,.71,1.26)!important;
 -o-transition: all .2s cubic-bezier(0,.34,.71,1.26)!important;
 transition: all .2s cubic-bezier(0,.34,.71,1.26)!important;
 }
 </style>
</head>
<body>
 <div class="ad">
 <a href=""><img src="screenshot.png" width="100%" height="100%"></a>
 <div class="tips">
 <i>i</i>
 <div class="text">也想出现在这里?联系我们吧</div>
 </div>
 </div> 
</body>
</html>
展开

该效果有一定的应用场景,如本文提到的广告招商,还有图片的注释等等;之前百度联盟有个图加广告就是利用此效果在图片上加广告,而不影响用户体验,只不过如今已无此样式。

思路非常简单,具体应用到什么场景,还要看大家自己的需求啦。

本文最后更新于2017年3月16日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:8   其中:访客  6   博主  2
    加载中...
    1. 2年前 (2017-03-20) 5楼

      蛮好的功能,可以收藏看以后有没有机会使用

    2. 2年前 (2017-03-18) 4楼

      看到博主站点上的疯抢优惠券,我就想去点几下!

    3. 2年前 (2017-03-17) 板凳

      css3的效果超级棒的

    4. 2年前 (2017-03-17) 椅子

      效果很棒~ 收藏了先 [鼓掌]

    5. 2年前 (2017-03-16) 沙发

      其实这个功能可以结合侧边那些返回顶部小工具一起使用。PS:比较感兴趣那个防扒代码功能是如何实现的?

      • 飞鸟
        2年前 (2017-03-17)  地下1层

        @boke112导航: 老古又有啥稀罕点子了?跟返回顶部的咋结合 [坏笑]

        • 2年前 (2017-03-17)  地下2层

          @飞鸟: 好像我在哪里看过,侧边返回顶部小工具中有一个小工具,鼠标放上去就显示相关提示信息,感觉跟你这个文中所说的类似

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    8 0 11,590
    Top