6

さまざまな要素をクリックすると変化するページを作成し、JavaScript を使用せずに複数のイベントをページのさまざまな要素にバインドすることは可能ですか?

4

3 に答える 3

16

はい、そうです。これを行うには複数の方法があります。:focus、:active、:checked を使用して実行できます。デモを見る。

以下は :checked を使用した例です。他のものよりもこれを選択する理由は、css ルールの記述が簡単になり、複数の要素を使用してさまざまな場所から操作できるようになるためです。しかし、十分な話、html:

<input type="checkbox" id="cb1" /><span>This will change color</span>

そしてCSS：

span { color: red; }
input:checked + span { color: blue; }

チェックボックスは醜く、すべてのブラウザーで同じように見えるわけではないと言うかもしれませんが、それは本当ですが、チェックボックスを表示する必要はありません。for 属性を持つラベルを使用して、チェックボックスの状態に影響を与えることができます。前の例では、次を使用してこれを実現できます。

<label for="cb1">Click here to toggle checkbox</label>

わかりましたが、1 つではなく 2 つの要素を使用するため、複雑になると思うかもしれませんが、同時に、<label for="id">ID で要素を選択するため、ドキュメント内の好きな場所にラベルを配置できます。それ以上に、複数のラベルを使用して同じ入力の状態を変更できます。また、必要に応じて、独自の ID またはクラスを指定して、異なるスタイルにすることもできます。

さらに、複数の入力の状​​態を組み合わせて、必要に応じてそのルールを追加することもできます。私が知っていることから、他の純粋な HTML + CSS ソリューションでは現在利用できません。

より複雑な例と、これを使用して達成されるライトボックスのような効果のマイクロデモについては、このfiddleを参照してください。

于 2012-10-12T01:30:20.897 に答える
3

私の個人的なお気に入りの擬似セレクターは :target です。

これは、私が作成した、:target のみに依存する小さな純粋な CSS ライトボックスです。ライトボックスはLightBoCSSと呼ばれます(明らかな理由から)。メイン ページにデモがあり、github リポジトリへのリンクがあります。Webkit 以外のトランジションはまだ追加していないので、最適なエクスペリエンスを得るには Webkit ブラウザを使用してください。

HTML:

    <div class="lightbox">
        <!-- ===== Put the thumbnails in here ===== -->
        <div class="thumbnails">
            <a href="#b1">
                <img src="images/ScreenShot1thumb1.png"/>
            </a>
            <a href="#b2">
                <img src="images/ScreenShot2thumb2.png"/>
            </a>
        </div>
        <!-- ===== Put the big images in here ===== -->
        <div class="lightboximg">
            <a id="b1" href="#">
                <img src="images/ScreenShot1.jpg" alt="EggMaps iPhone Screenshot 1" />
            </a>
            <a id="b2" href="#">
                <img src="images/ScreenShot2.jpg" alt="EggMaps iPhone Screenshot 2" />
            </a>
        </div>
    </div>

それを機能させる基本的な（蒸留された）CSS：

「a」がターゲットの場合、「top」プロパティが変更されます。

/* Hide each large image */
.lightboximg  > a { /* the container for a large image */
    top: -999em; 
}

/* display the (large image container) anchor elem when it is the target */
.lightboximg > a:target {
    top: 0px;
}

完全な CSS:

/* Note the :target pseudo-selector. */
/* Hide each large image */
.lightboximg  > a { /* the container for a large image */
    display: block;
    min-height: 100%;
    width: 100%;
    position: absolute;
    /*top: -999em;  for browsers that can't set top in percentages - see comment from xception below */
    top: -101%;
    background-color: #222222; /* dark grey - for browsers that can't do rgba */
    background-color: rgba(0,0,100,0.4); /* for browsers that can't set multiple backgrounds */
    background: url(Fabric-14.png), rgba(0,0,100,0.4);
    opacity: 0;
    transition: top 1s ease-in-out,  opacity 1s ease-in-out, z-index 0.5s ease-in-out;
    -webkit-transition: top 1s ease-in-out,  opacity 1s ease-in-out, z-index 0.5s ease-in-out;
    z-index: -1;
}


/* display the (large image container) anchor elem when it is the target */
.lightboximg > a:target {
    top: 0px;
    opacity: 1;
    transition: top 1s ease-in-out,  opacity 1s ease-in-out, z-index 0.5s ease-in-out;
    -webkit-transition: top 1s ease-in-out,  opacity 1s ease-in-out, z-index 0.5s ease-in-out;
    z-index: 1001;
}

/* style for the large images */
.lightboximg > a img {
    /* centre the image */
    display:block;
    margin: 0px auto;
    /* make it fit into the window */
    max-width: 100%;
}
于 2012-10-13T08:51:44.240 に答える