一、需求分析
默认状态下 , 界面中显示一张图片 :
当鼠标移动到 图片上时 , 显示如下效果 , 其中图片是逐渐放大的 , 有一个过渡 :
二、代码分析
----
上述盒子模型布局结构如下 , div...
上述图片 , 即使放大后 , 也没有 超出 父容器 div 盒子模型 的边界 , 因此这里需要 设置 超出边界外的 内容需要隐藏 , 父容器 需要 设置 overflow...: hidden 样式 ;
/* 隐藏边界之外的元素 图片放大后不要超出边界 */
overflow: hidden;
放大需要一个过程 , 这里将 放大操作...}
鼠标移动到 图片 上方后 , 放大 , 这里使用 伪类选择器 div img:hover , 设置 鼠标移动到 div img 标签上的样式 ;
div img:hover {...----
执行结果 :
默认状态为 :
鼠标移动到 第一张 图片后 , 显示的样式 , 第一章图片 在 div 盒子模型范围内 放大了 ;