效果图如下: (点击这里查看示例Demo)
鼠标hover样式设置
首先说下淘宝下面的这个图的
hover和其他的有什么不一样, 是这样的, 当鼠标移动到上面的时候, 图片会保持原来大小, 盒子整体不会发生位置的变化. 下面我来一步一步实现这个效果
只做简单的例子
首先布局
<div class="container">
<div class="box" id='box'>
</div>
</div>
样式
.container{
border:1px solid;
}
.container .box{
width: 400px;
height: 400px;
}
.container .box img{
width: 400px;
height: 400px;
}
/*当添加上 active 的时候, 给box 的border添加边框, 加了边框之后宽度变成了410, */
/*所以要减去变宽的宽度, 所以要把宽和高修改成390, 并且需要把图片超出的部分隐藏, */
/*所以要 overflow:hidden;*/
.container .box.active{
border:5px solid #f00;
width: 390px;
height: 390px;
overflow:hidden;
}
/* 为了保持图片的位置不变, 需要给图片设置定位属性(相对定位, 因为要保持图片在标准流中的位置), */
/*再使用 top 和 left 将图片微调即可 */
.container .box.active img{
position: relative;
top: -5px;
left: -5px;
}
js 脚本
window.onload = function(){
var box = document.getElementById('box');
box.onmouseover = function(){ // 鼠标移入的时候将 box 的 className 改成'box active'
this.className = 'box active';
}
box.onmouseout = function(){
this.className = 'box'; // 移除之后还原
}
}
