关于css3，想实现鼠标滑过弹出层，并且图片变成半透明，现在文字层把图片层挡住了，鼠标滑过只显示文字。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.body{
margin:0px;
padding:0px;
}
.scale{
width:390px;
height:250px;
position:relative;
display:block;
}
.img1{
margin:50px auto;
}
.img1:hover{
transition:all .5s ease-in 0s;
-webkit-transition:all .5s ease-in 0s;
-moz-transition:all .5s ease-in 0s;
opacity:0.5;
-webkit-transform: scale(.8);
-moz-transform: scale(.8);
transform: scale(.8);
}
.about{
width:390px;
height:250px;
border:1px red solid;
position:relative;
bottom:300px;
color:#fff;
opacity:0;
transition:all .5s ease-in 0s;
-webkit-transition:all .5s ease-in 0s;
-moz-transition:all .5s ease-in 0s;
}
.about:hover{
opacity:1;
}
.big{
font:bold 20px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<div class="scale">
<img class="img1" src="images/about-1.jpg"></img>
<div class="about">
<p class="big">
Google is the future
</p>
<p class="small">
And I believe it all the time
</p>
</div>
</div>
</body>
</html> 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.body{
margin:0px;
padding:0px;
}
.scale{
width:390px;
height:250px;
position:relative;
display:block;
}
.img1{
margin:50px auto;
}
.img1:hover{
transition:all .5s ease-in 0s;
-webkit-transition:all .5s ease-in 0s;
-moz-transition:all .5s ease-in 0s;
opacity:0.5;
-webkit-transform: scale(.8);
-moz-transform: scale(.8);
transform: scale(.8);
}
.about{
width:390px;
height:250px;
border:1px red solid;
position:relative;
bottom:300px;
color:#fff;
opacity:0;
transition:all .5s ease-in 0s;
-webkit-transition:all .5s ease-in 0s;
-moz-transition:all .5s ease-in 0s;
}
.about:hover{
opacity:1;
}
.big{
font:bold 20px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<div class="scale">
<img class="img1" src="images/about-1.jpg"></img>
<div class="about">
<p class="big">
Google is the future
</p>
<p class="small">
And I believe it all the time
</p>
</div>
</div>
</body>
</html> 展开
- 你的回答被采纳后将获得：
- 系统奖励15（财富值+成长值）+难题奖励10（财富值+成长值）+提问者悬赏5（财富值+成长值）
1个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.body{
margin:0px;
padding:0px;
}
.scale{
width:390px;
height:250px;
position:relative;
display:block;
}
.img1{
margin:50px auto;
}
.img1:hover{
transition:all .5s ease-in 0s;
-webkit-transition:all .5s ease-in 0s;
-moz-transition:all .5s ease-in 0s;
opacity:0.5;
-webkit-transform: scale(.8);
-moz-transform: scale(.8);
transform: scale(.8);
}
.about{
width:390px;
height:250px;
border:1px red solid;
position:relative;
bottom:300px;
color:#fff;
opacity:0;
transition:all .5s ease-in 0s;
-webkit-transition:all .5s ease-in 0s;
-moz-transition:all .5s ease-in 0s;
}
.about:hover{
opacity:1;
}
.big{
font:bold 20px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: black;
}
.small{
color: black;
}
</style>
</head>
<body>
<div class="scale">
<img class="img1" src="2.jpg"></img>
<div class="about">
<div class="small">
And I believe it all the time
</div>
<dib class="big">
Google is the future
</div>
</div>
</div>
</body>
</html>
这样就可以了，是要这样的吗
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.body{
margin:0px;
padding:0px;
}
.scale{
width:390px;
height:250px;
position:relative;
display:block;
}
.img1{
margin:50px auto;
}
.img1:hover{
transition:all .5s ease-in 0s;
-webkit-transition:all .5s ease-in 0s;
-moz-transition:all .5s ease-in 0s;
opacity:0.5;
-webkit-transform: scale(.8);
-moz-transform: scale(.8);
transform: scale(.8);
}
.about{
width:390px;
height:250px;
border:1px red solid;
position:relative;
bottom:300px;
color:#fff;
opacity:0;
transition:all .5s ease-in 0s;
-webkit-transition:all .5s ease-in 0s;
-moz-transition:all .5s ease-in 0s;
}
.about:hover{
opacity:1;
}
.big{
font:bold 20px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: black;
}
.small{
color: black;
}
</style>
</head>
<body>
<div class="scale">
<img class="img1" src="2.jpg"></img>
<div class="about">
<div class="small">
And I believe it all the time
</div>
<dib class="big">
Google is the future
</div>
</div>
</div>
</body>
</html>
这样就可以了，是要这样的吗
更多追问追答
追问
你这个和我那个有什么不同吗？
追答
有，位置调换了，改用div,添加一个small样式
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
