不过这类行为范畴的东西最好交由JS来完成。
还有就是IE6对元素伪类支持不好，hover有bug。测试的时候要注意。
1、假设图片外层DIV的class为pic，图片的大小是400*300，html代码可以写成下面这样:
<divclass="pic">
<imgsrc="abc.jpg"width="400"height="300"/>
</div>
2、如果希望鼠标经过时图片的尺寸变成600*450，那么在css里面只要这样定义就行了:picimg:hover{width:600pxheight:450px}
3、这个代码在ie6下会不生效，因为ie6不支持除A标签外的其他元素的:hover伪类。如果要在ie6下兼容，只需要把div改成a标签，也就是在图片上加一个超链接，然后给它加上一个class即可。
鼠标
鼠标是计算机的一种输入设备，分有线和无线两种，也是计算机显示系统纵横坐标定位的指示器，因形似老鼠而得名"鼠标"(港台作滑鼠)。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>鼠标悬停图片效果</title>
<style>
*{
margin:0
padding:0
}
.box{
position:relative/*相对定位*/
width:300px/*宽度*/
height:270px/*高度*/
overflow:hidden/*溢出隐藏*/
margin-left:10px/*左外边距*/
margin-top:10px/*顶部外侧边距*/
}
.box img{
width:100%/*宽度*/
height:100%/*高度*/
transition:all 0.3s/*过渡时间*/
}
#box1:hover img{
transform:scale(1.2,1.2)/*放大1.2倍*/
}
#box2 span{
position:absolute/*绝对定位*/
color:red/*文字红色*/
display:none/*隐藏*/
}
#box2:hover span{
display:block/*显示*/
}
#box3:hover{
width:294px/*宽度*/
height:264px/*高度*/
border:3px solid black/*边框*/
}
#box4:hover{
box-shadow:2px 2px gray,-2px -2px gray/*阴影*/
}
#box5:hover img{
transform:rotate(360deg)/*正时针旋转360度，既转一圈*/
}
#box6 h3{
position:absolute/*绝对定位*/
width:120px/*宽度*/
height:120px/*高度*/
font-size:14px/*字体高度*/
background:white/*背景白色*/
display:flex/*弹性容器*/
display:-webkit-flex
justify-content:center
-webkit-justify-content:center/*横向居中*/
align-items:flex-end
-webkit-align-items:flex-end/*纵向靠底部*/
transform:rotate(45deg)/*正时针旋转45度*/
top:-60px/*距离顶部-60px*/
right:-60px/*距离右侧-60px*/
z-index:-1/*在最底层，被遮住看不到*/
}
#box6:hover h3{
z-index:1/*在最顶层，不被遮住，可视。*/
}
</style>
</body>
<!--鼠标悬停图片放大-->
<div class="box" id="box1">
<img src="img/1.jpg">
</div>
<!--鼠标悬停，图片上显示文字-->
<div class="box" id="box2">
<span>一段文字</span>
<img src="img/1.jpg">
</div>
<!--鼠标悬停，图片显示边框-->
<div class="box" id="box3">
<img src="img/1.jpg">
</div>
<!--鼠标悬停，图片显示阴影-->
<div class="box" id="box4">
<img src="img/1.jpg">
</div>
<!--鼠标悬停，图片旋转一圈-->
<div class="box" id="box5">
<img src="img/1.jpg">
</div>
<!--鼠标悬停，图片缺一个角，缺少部分显示栏目名称或其他-->
<div class="box" id="box6">
<h3>板块栏目名称</h3>
<img src="img/1.jpg">
</div>
</body>
</html>
