搜 索

css实现一种美观的鼠标悬停显示图片详情效果

编辑:QTOOL.NET日期:2019-08-10263

在一些网站上,有时候鼠标悬停在图片上,会显示图片的详情效果,一般都是使用js或jq来实现的.
那么如果不想用js或jq来实现我们该怎样做
css样式代码如下:
<style type="text/css">
.piclist{
position: relative;
z-index: 0;
}
.piclist span{ 
position: absolute;
background-color:hsla(0,0%,93%,1.00);/*图片详情框颜色*/
padding: 6px;/*图片详情框边距*/
left: -1000px;
border: 1px dashed gray;/*详情的边框设置*/
visibility: hidden;/*多出部分隐藏*/
color: black;        /*字体颜色*/
text-decoration: none;
}
.piclist span img{ 
border-width: 0;
padding: 3px; /*边距为3*/
}
.piclist:hover{
background-color:hsla(127,100%,23%,1.00);/*鼠标移动到图片所在地方时显示的背景色*/
z-index: 50;
}
.piclist:hover span{ 
visibility: visible;
top: 0;/*上边距0*/
left: 62px;  /*左边距62px*/
}
</style>
html代码内容:
<a class="piclist" href="#"><img src="图片地址1" width="100px" height="68px" border="0" /><span><img src="详细大图地址1" /><br />图片描述信息</span></a>
 
<a class="piclist" href="#"><img src="图片地址2" width="100px" height="68px" border="0" /><span><img src="详细大图地址2" /><br />详细图片的描述内容2</span></a>
我们只需要将css代码放在新建的css文件或直接在页面的head标签中,html代码放在body标签内即可实现鼠标悬停在图片上动态显示出图片详情的效果了.

TAG标签:css
此文章由QTOOL.NET编辑
最新文章

热门标签