css3中设置的img：hover不起作用
想实现照片墙的效果，鼠标移动到图片上时图片放大等，不知道代码哪写错了，求指教html代码：<metahttp-equiv="Content-Type"content="t...
想实现照片墙的效果，鼠标移动到图片上时图片放大等，不知道代码哪写错了，求指教
html代码：
<meta http-equiv="Content-Type" content="text/html" charset="gb2312" />
<html>
<head>
<title>照片墙</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<img class="pic pic1" src="1.jpg">
<img class="pic pic2" src="2.jpg">
......
<img class="pic pic19" src="9.jpg">
<img class="pic pic20" src="10.jpg">
</div>
</body>
</html>
css代码：
*{
margin: 0;
padding: 0;
}
body{
background-color: #eeeeee;
}
.container{
width: 1000px;
height: 830px;
margin: 20px auto;
position: relative;
}
.pic{
width: 150px;
}
.container img: hover{
box-shadow: 15px 15px 14px rgba(50,50,50,0.4);
transform: rotate(0deg) scale(1.2);
-webkit-transform: rotate(0deg) scale(1.2);
-moz-transform: rotate(0deg) scale(1.2);
z-index: 2;
}
.container img{
padding: 3px;
background: white;
border: 1px solid #ddd;
box-shadow: 5px 5px 4px rgba(50,50,50,0.4);
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
position: absolute;
z-index: 1;
}
.pic1{
left: 100px;
top: 0;
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
}
.pic2{
left: 250px;
top: 50px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
}
.pic19{
left: 200px;
bottom: 150px;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
.pic20{
left: 620px;
bottom: 100px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
} 展开
html代码：
<meta http-equiv="Content-Type" content="text/html" charset="gb2312" />
<html>
<head>
<title>照片墙</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<img class="pic pic1" src="1.jpg">
<img class="pic pic2" src="2.jpg">
......
<img class="pic pic19" src="9.jpg">
<img class="pic pic20" src="10.jpg">
</div>
</body>
</html>
css代码：
*{
margin: 0;
padding: 0;
}
body{
background-color: #eeeeee;
}
.container{
width: 1000px;
height: 830px;
margin: 20px auto;
position: relative;
}
.pic{
width: 150px;
}
.container img: hover{
box-shadow: 15px 15px 14px rgba(50,50,50,0.4);
transform: rotate(0deg) scale(1.2);
-webkit-transform: rotate(0deg) scale(1.2);
-moz-transform: rotate(0deg) scale(1.2);
z-index: 2;
}
.container img{
padding: 3px;
background: white;
border: 1px solid #ddd;
box-shadow: 5px 5px 4px rgba(50,50,50,0.4);
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
position: absolute;
z-index: 1;
}
.pic1{
left: 100px;
top: 0;
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
}
.pic2{
left: 250px;
top: 50px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
}
.pic19{
left: 200px;
bottom: 150px;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
.pic20{
left: 620px;
bottom: 100px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
} 展开
1个回答
展开全部
用你的代码，有效果啊！我用的谷歌浏览器！你用的什么浏览器？不是所有的浏览器都支持这个的！
更多追问追答
追问
我也用的chrome啊！怎么没效果？
追答
可是，我的有效果！带旋转的，放大效果，有阴影！你的html文件是html5的么？
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
微测检测5.10
2023-05-10 广告
您好！建议咨 深圳市微测检测有限公司，已建立起十余个专业实验室，企业通过微测检测就可以获得一站式的测试与认 证解决方案；(EMC、RF、MFi、BQB、QI、USB、安全、锂电池、快充、汽车电子EMC、汽车手机互 联、语音通话质量），认证遇...
点击进入详情页
本回答由微测检测5.10提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
