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

PetitQ HTML/CSS 2019-3-12 1.26K 0 0

本文利用 css 中:hover 伪类实现将鼠标指向某区块时，区块内部滑出小提示效果，应用场景如广告上招商功能，一起来看一下。之前在某个平台发现了一个很有趣的效果，广告上有一个小按钮，当鼠标指向广告的时候，小按钮处侧滑出一个文本提示“也想在这里显示？联系我们吧”这种类似于“百度联盟图加 wap”版的效果瞬间让我觉得体验很棒，还能够起到“招商”的效果。当时准备拔下来，却发现人家启用了防扒代码功能，一时间就没能达成。后想一下无非是利用 css 中:hover 伪类，起初文本提示框处于隐藏状态，在鼠标指向外部 div 时，触发 hover 效果，然后利用:hover 伪类后面加上文本框的类，使其显示出来。

    <!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>
```

也想出现在这里？联系我们吧

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

鼠标指向区块滑出小提示效果

也想出现在这里？联系我们吧

该效果有一定的应用场景，如本文提到的广告招商，还有图片的注释等等；之前百度联盟有个图加广告就是利用此效果在图片上加广告，而不影响用户体验，只不过如今已无此样式。思路非常简单，具体应用到什么场景，还要看大家自己的需求啦。

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

已有 315 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

HTML/CSS

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

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

相关文章

JavaScript中escape()、encodeURI()、encodeURIComponent()的区别

HTML中调用返回上一页代码

使用jQuery设置指定时间后页面元素隐藏

发表回复取消回复

热销模板

HTML/CSS

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复