1

最上位の DIV を非アクティブ化して、その下にあるものを選択できるようにするにはどうすればよいですか?

ここで何をしたかを確認してください： http://jsfiddle.net/zE5Ze/2/

#triangle_w {
    width: 1000px;
    height: 178px;
    overflow: hidden;
    position: fixed;
    left: -24px;
    top: -82px;
    /*outline: 1px solid pink;*/

    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}
#triangle {
    width: 961px;
    height: 176px;
    background: url('http://i.imgur.com/FTGa2.png') no-repeat;
    position: absolute;
    left: 10px;
    bottom: -80px;
    /*outline: 1px solid red;*/

    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
}
#triangle #menu {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    /*outline: 1px solid red;*/
}

回転なし: http://jsfiddle.net/zE5Ze/5/ ご覧のとおり、赤い枠内の領域は選択できません。

CSS のローテーションをいじらずにこれを行う方法はありますか? 三角形を非アクティブにして、メニューとサムのみをアクティブのままにしたいと思います。

4

1 に答える 1

1

単純。を与えますz-index。

#triangle #menu a {z-index: 5;}

フィドル: http://jsfiddle.net/zE5Ze/3/

またはwidth!を設定します。

#triangle_w {width: 100px;}

フィドル: http://jsfiddle.net/zE5Ze/4/

于 2012-10-30T12:38:48.013 に答える