0

私は非常に奇妙な問題を抱えています..

' 2 つのオブジェクトがあります:

<div id="menu">
        <a href="#"><img src="images/nagrody.png"></a>
        <a href="#"><img src="images/zwyciezcy.png"></a>
        <a href="#"><img src="images/zasady.png"></a>
</div>

スタイル:

#menu {
float:right;
margin:20px 10px;
width: 160px;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
}

#menu img{
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;

    -webkit-transform:scale(0.95,0.95);
    -moz-transform:scale(0.95,0.95);
    -o-transform:scale(0.95,0.95);

    overflow:hidden;
}

#menu img:hover{

    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    -o-transform:scale(1,1);
}

そして2番目のオブジェクト:

<div id="znajomi">
        <a href="#"><img src="images/zapros.png"></a>
        <p>BRAKUJE CI JESZCZE <span id="fr">3 ZNAJOMYCH</span></p>
</div>

スタイル:

#znajomi {
    padding:420px 20px;
    -webkit-transform:rotate(-4deg);
    -moz-transform:rotate(-4deg);
    -o-transform:rotate(-4deg);
}

#znajomi p {
    font-family:DIN, Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#fff;
    position:relative;
    top:-20px;
    left:20px;
}

#fr {
    font-family: Arista, Arial, Helvetica, sans-serif;
    font-size:21px;
    color:#c2dc2f;
    text-shadow:rgba(113,0,0,0.75) 2px 2px;
}

そして私の問題はそれです：#znajomiから削除した場合

-webkit-transform:rotate(-4deg);
-moz-transform:rotate(-4deg);
-o-transform:rotate(-4deg);

メニュー作業からホバーしますが、このコードがプラステの場合は機能しません。

助言がありますか？

4

1 に答える 1

0

-#znajomi要素は#menu. z-index またはその他の配置を使用する必要があります。完全なサイト レイアウトがなければ、最適な変更の例を示すことはできません。

メニューからを削除すると役立ちfloat:rightます。を追加しmargin-leftて、前と同じ結果を得ることができます。

于 2012-06-04T14:46:50.010 に答える