1、利用内部样式表实现
<!doctype html>
<html>
<head>
<title>Dome</title>
<meta charset="utf-8">
<style>
#container{
width:360px;
height:120px;
overflow:auto;
}
#container p{
width:600px;
height:70px;
}
img{
border:2px solid transparent;
}
img:hover{
border:2px solid red;
}
</style>
</head>
<body>
<div id="container">
<p>
<img src="images/p_small_001.jpg">
<img src="images/p_small_002.jpg">
<img src="images/p_small_003.jpg">
<img src="images/p_small_004.jpg">
<img src="images/p_small_005.jpg">
<img src="images/p_small_006.jpg">
<img src="images/p_small_007.jpg">
</p>
</div>
</body>
</html>
注:如果注释掉上面的
img{
border:2px solid transparent;
}
当鼠标悬停和未悬停时,商品图片会出现,放大和缩小的效果;
原因是:当鼠标悬停在图片上,出现边框,增加2px,未悬停时,边框消失。反复如此,就会出现2px的增加和减少的情况,从而造成图像的放大和缩小效果
2、利用外部样式表实现
index.html
<!doctype html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/container.css">
</head>
<body>
<div id="container">
<p>
<img src="images/p_small_001.jpg">
<img src="images/p_small_002.jpg">
<img src="images/p_small_003.jpg">
<img src="images/p_small_004.jpg">
<img src="images/p_small_005.jpg">
<img src="images/p_small_006.jpg">
<img src="images/p_small_007.jpg">
</p>
</div>
</body>
</html>
container.css
#container{
width:360px;
height:120px;
overflow:auto;
}
#container p{
width:600px;
height:70px;
}
img{
border:2px solid transparent;
}
img:hover{
border:2px solid red;
}