我以某种方式设法让几乎所有东西都正常工作。但是框 3 中的按钮并没有立即显示,甚至当你将鼠标悬停在它上面时它也会向上一点。如何解决这个问题我整天都在搜索和调整解决方案。
这是小提琴链接:
鼠标悬停:http: //i.stack.imgur.com/mrLVy.png
HTML 代码:
<br /><br /><br /><br /><br />
<div class="box image1">1</div>
<div class="box image1">2</div>
<div class="box image3"><a class='fb_iframe' href="./">
<div align="center">
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<div id="btn">
<span class="plus">OPDRACHT PLAATSEN</span>
</div>
CSS 代码:正文 {
margin:50px 0px; padding:0px;
text-align:center;
background-color: white;
}
.box {
background-color: none;
width: 200px;
height: 400px;
float: left;
border: 1px solid lightgrey;
margin: 10px;
}
.image1 {
background-image:url("http://www.gravatar.com/avatar/8ce7045aad4528bbed3d19fe030c8d85?s=32&d=identicon&r=PG");
}
.image2 {
background-image:url("http://www.gravatar.com/avatar/8ce7045aad4528bbed3d19fe030c8d85?s=32&d=identicon&r=PG");
}
.image3 {
background-image:url("http://www.gravatar.com/avatar/8ce7045aad4528bbed3d19fe030c8d85?s=32&d=identicon&r=PG");
}
.box:hover{
width: 250px;
/* This is 52px total. 1/2 of that is for top and the other half is for bottom. */
height: 452px;
/* Below we are not using -26px for margin-top because .box has 6px border and 10px margin. */
/* That 16px is then divide by 2 since it's for both top and bottom, or 8px per side. */
/* Having said that, 26px - 8px is 18px. We need negative value to position it correctly. */
margin-top: -18px;
-moz-box-shadow: 0 0 50px black;
-webkit-box-shadow: 0 0 50px black;
box-shadow: 0 0 50px black;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
height: 100%;
font-family: 'Open Sans', sans-serif;
}
height: 100%;
color: #fff;
background: #505050;
background-attachment: fixed;
background: -webkit-gradient(linear, top, bottom, from(#09465d), to(#0f536e));
background: -webkit-linear-gradient( 90deg, #09465d, #0f536e);
background: -moz-linear-gradient( 90deg, #09465d, #0f536e);
background: linear-gradient( 90deg, #09465d, #0f536e);
}
#btn {
font-size: 13px;
text-shadow: 0 -1px 0 rgba(0,0,0,.9);
margin: 20px;
background: -webkit-gradient(linear, top, bottom, from(#1d4763), to(#215f86));
background: -webkit-linear-gradient( 90deg, #1d4763, #215f86);
background: -moz-linear-gradient( 90deg, #1d4763, #215f86);
background: linear-gradient( 90deg, #1d4763, #215f86);
overflow: hidden;
display: inline-table;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, 0.8);
border-radius: 3px;
cursor: pointer;
}
#btn:hover {
background: -webkit-gradient(linear, top, bottom, from(#19405a), to(#1d587d));
background: -webkit-linear-gradient( 90deg, #19405a, #1d587d);
background: -moz-linear-gradient( 90deg, #19405a, #1d587d);
background: linear-gradient( 90deg, #19405a, #1d587d);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, 0.9);
border-radius: 3px;
}
#btn:active {
background: -webkit-gradient(linear, top, bottom, from(#19405a), to(#1d587d));
background: -webkit-linear-gradient( 90deg, #19405a, #1d587d);
background: -moz-linear-gradient( 90deg, #19405a, #1d587d);
background: linear-gradient( 90deg, #19405a, #1d587d);
-webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15), inset 0 1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, 0.6);
border-radius: 3px;
}
#btn p, span, p span {
height: 30px;
line-height: 30px;
display: inline-block;
margin: 0 auto
}
#btn p {
padding: 0 12px;
border-left: 1px solid rgba(0,0,0,.1);
}
#btn span.plus {
padding: 0 12px;
font-size: 14px;
font-weight: bold;
border-right: 1px solid rgba(255,255,255,.1);
}
#btn p span {
font-size: 12px;
}