0

私はどういうわけかほとんどすべてを機能させることができました。しかし、ボックス 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;
    }
4

1 に答える 1

0

.box:hover を閉じてから、さらに 2 回閉じます。そこに欠けているスタイルはありますか？

http://jsfiddle.net/calder12/2aHeU/22

.box:hover{
  width: 250px;

  margin-top: -18px;
 -moz-box-shadow:    0 0 50px black;
 -webkit-box-shadow: 0 0 50px black;
 box-shadow:         0 0 50px black;    

}
于 2013-01-03T15:53:59.087 に答える