下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。
本文利用 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,1.26)!important;
-ms-Transition: all .2s cubic-bezIEr(0,1.26)!important;
-o-Transition: all .2s cubic-bezIEr(0,1.26)!important;
Transition: all .2s cubic-bezIEr(0,1.26)!important;
}
</style>
</head>
<body>
<div >
<a href=""><img src="screenshot.png" wIDth="100%" height="100%"></a>
<div >
<i>i</i>
<div >也想出现在这里？联系我们吧</div>
</div>
</div>
</body>
</HTML>
具体效果如下图，未指向鼠标的时候仅显示一个小圆点，鼠标指向区块的时候，文本框滑出来。
代码预览
<!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,1.26)!important;
}
</style>
</head>
<body>
<div >
<a href=""><img src="screenshot.png" wIDth="100%" height="100%"></a>
<div >
<i>i</i>
<div >也想出现在这里？联系我们吧</div>
</div>
</div>
</body>
</HTML>
该效果有一定的应用场景，如本文提到的广告招商，还有图片的注释等等；之前百度联盟有个图加广告就是利用此效果在图片上加广告，而不影响用户体验，只不过如今已无此样式。思路非常简单，具体应用到什么场景，还要看大家自己的需求啦。
以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的利用:hover伪类实现鼠标指向区块滑出小提示效果全部内容，希望文章能够帮你解决利用:hover伪类实现鼠标指向区块滑出小提示效果所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）