3

divを表示したいと思っていclickます。目標は、jQueryではなく純粋なCSSのみを使用することです。

4

2 に答える 2

18

Working FIDDLE Demo

次のようなものが必要だと考えてください。

ここに画像の説明を入力してください

マークアップは可能な限りシンプルに記述します。の1containerつの要素、私たちの1つの要素、および：linkのもう1つの要素popup

<!-- [container] -->
<div class="link-with-popup">

    <!-- link -->
    <div class="link">CSS</div>

    <!-- [popup] -->
    <div class="popup">
        <div class="box">CSS Description</div>
    </div>
    <!-- [/popup] -->

</div>
<!-- [/container] -->

写真のレイヤー構造は次のとおりです。

ここに画像の説明を入力してください

容器

コンテナのCSSを書いてみましょう。

.link-with-popup {
    /* for visualizing */
    background: yellow;

    /* we need relative, because childs are absolute */
    position: relative;

    margin-bottom: 10px;
    height: 30px;
    width: 400px;
}
  • [!]コンテナを作成することに注意してくださいrelative。子供たちがabsoluteモードになるからです。

ここに画像の説明を入力してください

リンク

link上図のように、左から絶対要素として作成します。

.link {
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100px;
    z-index: 10;
}

ここに画像の説明を入力してください

現れる

popup要素の次元はコンテナと同じであるため、すべてtopのleft、、、プロパティをに設定します。rightbottom0

.popup {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: green;
        z-index: 20;
    }
  • [!]z-index要素のはpopup要素より大きくなければならないことに注意してくださいlink。

ここに画像の説明を入力してください

.popup {
        /* we won't show the popup yet */
        display: none;
}

ここまでで、この結果が得られます（jsFiddleで確認してください）。

ここに画像の説明を入力してください

今click、私たちは私たちのリンクのために欲しいです。これは:active、CSSの疑似セレクターを使用して実行する必要があります。しかし、どのように表示する必要がありpoupますか？によって次の兄弟要素を取得する必要がありlinkます。+CSSでセレクターを使用します。

.link:active + .popup {
    display: block;
}

jsFiddleで結果を参照してください。ただし、問題は、ユーザーがマウスに気付くと、ポップアップが消えてしまうことです（にdisplay設定されているためnone）。そこで、の:hoverルールを設定しpopupて作成しblockます。

.popup:hover {
    display: block;
}

jsFiddleデモを確認してください。今、私たちは十分に近づいています。popup要素が私たちを隠す唯一の問題link。しかし、それは問題ではありません。なぜならbackground、私たちは私たちのために設定しないからですpopup（そうなるでしょうtransparent）。

文章

必要な要素についてはtext、popup次のルールを設定します。

.popup .box {
    position: absolute;

    /* note that we make a gap from left to don't hide the link */
    left: 130px;
    top: 0;
    right: 0;
    bottom: 0;
    background: #505050;
}

jsFiddleデモを確認してください。これで、必要なものがすべて揃いました。

ここに画像の説明を入力してください

popup次に、要素を作成します（ astransparentを設定するか、単にルールを削除します）。backgroundtransparentbackground: green;

.popup {
    background: transparent;
}

ここに画像の説明を入力してください

そして、これが最終的なjsFiddleの結果です。また、CSSを追加すると、よりスタイリッシュになります。私が作成したこのようなもの。

覚えておくべきいくつかの重要な注意事項：

  • link最終結果では、 （青いもの）とpopup（灰色のもの）の間にギャップがあります。しかし、実際には、灰色の要素は私たちのものではありませんpopup。これはの子でpopupあり、ポップアップはコンテナの100％の幅と高さの要素です。

Working FIDDLE Demo

于 2013-05-14T08:42:27.590 に答える
2

もう1つの方法は、：targetプロパティを使用することです（最新のブラウザーでのみ機能します）。

これがqucikデモで、適用してdivを非表示にしましたopacity: 0;。リンクをクリックすると、divが次のように変更されますopacity: 1;。リンクとdivは、URLのハッシュを使用して照合されます。

これが私の例のコードです。

HTML

<a href="#pop">Click me</a>
<br />
<div id="pop"></div>

CSS

#pop {
  width: 100px;
  height: 100px;
  background: #000;
  opacity: 0;
}

#pop:target {
  opacity: 1;
}

ただし、いくつかの副作用があります。ブラウザは一致したdivにジャンプ/スクロールダウンし（これを防ぐことができるかどうかわかりませんか？）、URLでハッシュを使用しているため、ブラウザの履歴に影響し、前述のように、最新のブラウザでのみ機能します。

編集純粋なCSSクリックイベントの他のハック/トリックを調べたい場合は、これは良い投稿です-http://tympanus.net/codrops/2012/12/17/css-click-events/

于 2013-01-15T07:11:09.337 に答える