简单的鼠标悬停商品预览和介绍效果

Html

Css

Js

    
    小学篱笆旁的蒲公英 是记忆里有味道的风景 午睡操场传来蝉的声音

.content { width:200px; height:200px; position:relative; overflow:hidden; } .content img { width:200px; height:200px; float:left; transition:all 0.6s; cursor:pointer; border:0; } .content img:hover { transform:scale(1.5); } .note { width:200px; height:50px; display:block; text-decoration:none; color:#FFFFFF; cursor:pointer; text-indent:1em; line-height:30px; /*初始化隐藏多余文字*/ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left; position:absolute; bottom:0px; background-color:rgba(0,0,0,0.5); /* 背景变灰 */ transition:all 0.6s; } .note:hover { width:200px; height:200px; line-height:30px; text-indent:1em; /*显示全部文字*/ white-space:normal; word-break:break-word; text-overflow:inherit; }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

一个简单的小组件，用来展示一个图片并给图片添加简单介绍，主要两个功能：

1、鼠标覆盖图片时，图片自动放大。

2、鼠标覆盖文字时，文字区域扩大，显示全部介绍，鼠标移走后文字区域自动缩小并隐藏多余文字。