3

同じサイズのボックスがいくつかある Web ページがあります。それらの一部は非表示 ( ) であり、他のものは、以下の画像に示すように、&.dummyと言うクラスを持つことで表示されます:[簡単にするために、ここでは画像にのみ表示されています。実際の HTML コードでは、背景や境界線がないため、表示されません。].A.B.C dummy

ここに画像の説明を入力

ここで、ユーザーが をクリックするとlink A、すべてのボックスがクラス '.A' のボックスを期待しますfadeOut。ここに示す他のリンクについても同様です。

ここに画像の説明を入力

div#1ポインターがホバーされたときに、ボックスのみの寸法を変更したい。ただし、.hover コマンドを適用すると、ページ全体がゆがんでしまいます。すべてのボックスをそのままにして、の幅だけ#div 1を増やしたいです。同様に、増加するのheightはののみです。#div 2この目的のために、エフェクトごとに個別のクラスを作成する必要がありますか?

編集＃1

これらは私の関連コードです：

.dummy {
    float:left;
    position:relative;
    overflow:hidden;
    width:6.36896%;
    height:22.2287%;
    margin:2px;
    background:none;
}

.A, .B, .C{
    background:rgba(0, 0, 0, .30);
    float:left;
    position:relative;
    overflow:hidden;
    width:6.36896%;
    height:22.2287%;
    margin:2px;
    box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
4

1 に答える 1

1

すべてのクラス A div が同じ親の下にある場合は、nth-of-type セレクターを試すことができます。

例えば、

<html>
    <head>
        <style>
            .A {
                width: 50px;
                height: 50px;
                border: 1px solid #CCC;
            }
            #outer div:nth-of-type(1) .A:hover {
                width: 300px;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div>
                <div class="A"></div>
            </div>
            <div>
                <div class="A"></div>
                <div class="A"></div>
            </div>
        </div>
    </body>
</html>

敬称:

W3C CSS セレクター リファレンス

于 2013-01-05T10:51:52.983 に答える