1

Jmpress.js スライドショー フレームワーク内のCSS NOTセレクターに問題があります。

非アクティブなスライドを不透明にするのに適しています。しかし、アクティブな子が格納されている親スライドにも影響しているため、アクティブであっても子スライドが不透明として表示されます。

何が起こっているかのビデオを含めました。

http://www.youtube.com/watch?v=2xvLMIQ2fSY

階層に収まるスライドを表示する方法の例

それはそれでいいのですが、親子関係が多いのではないでしょうか。メニュー階層のようなものです。

したがって、子スライドを使用している場合、他のスライドは不透明に設定されていますが、その親 (不透明になり、子に影響を与える) が影響を受けないようにします。

  • あ
    • A1
    • A2
  • B
    • B1
    • B2
  • ハ

誰かがB2を表示していた場合、 Bを表示したいのですが、 AとCを不透明にしたいと考えています。以下のコードをインクルードしました

デイブ

<html>
<head>
<style>
    /* Lots of CSS plus */
    .step:not(.active) {
        opacity: 0.3;
    }
</style>
</head>
<body>
    <div id="presentation">

        <!-- Any slide/step that is active shows while all others have an opacity of .3 -->  
        <div id="step_1" class="step" data--template="mytemplate" data-x="0" data-y="0" data-rotate="0" data-scale="0">
            <h2 class="StepTitle">My Slide</h2>
        </div>

        <div id="step_2" class="step" data--template="mytemplate" data-x="750" data-y="50" data-rotate="0" data-scale="0">
            <h2 class="StepTitle">My next Slide</h2>
        </div>

        <div id="step_3" class="step" data--template="mytemplate" data-x="1500" data-y="100" data-rotate="0" data-scale="0">
            <h2 class="StepTitle">David</h2>

            <!-- 
            When this slide: Step_4 becomes ACTIVE, its parent Step_3 becomes InACTIVE
            Because parent is inactive, Step 4 shows with an Opacity of 0.3, 
            when I really want the default Opacity of 1.0
            -->
            <div id="step_4" class="step" data--template="mytemplate" data-x="0" data-y="500" data-rotate="0" data-scale="0">
                <h2 class="StepTitle">You Tube</h2>
            </div>
        </div>

    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="js/jmpress.all.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        $(function () {
            $('#presentation').jmpress();
        });
    </script>

</body>
</html>

ブローブロー

4

2 に答える 2

1

次のように、別の css ルールを使用して非アクティブな親内のアクティブな div と一致させ、それに 1.0 不透明度を適用できます。

.step:not(.active) {
    opacity: 0.3;
}

.step:not(.active) div.active {
   opacity: 1.0;
}

それはあなたが望むことをするはずです。

于 2012-11-11T06:02:47.020 に答える
0

ネルソンさん、ご返信ありがとうございます。あなたが提供したセレクターは問題の解決に役立ちましたが、最終的に私の問題は次の方法で解決する必要がありました

http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

CSS の不透明度の問題

このコードが影響する html 要素に子要素を追加すると、問題が発生します。すべての子要素に完全な不透明度を指定しようとしても、すべての子要素は同じ不透明度設定を継承します (これを行うには面倒です)。

私のコードには親パネルのラッパー オブジェクトがあり、子はそのラッパー パネルの外側にあり、スライド自体の内側にあります。

<slide id="step_3">
    <div class="panel">
        <a name="step3"></a>
        <h2 class="StepTitle">Multi Slides</h2>
    </div>

    <slide id="step_4">
        <div class="panel">
            <a name="step4"></a>
            <h2 class="StepTitle">You Tube</h2>
        </div>
    </slide>

    <slide id="step_5">
        <div class="panel">
            <a name="step5"></a>
            <h2 class="StepTitle">IFrame</h2>
        </div>
    </slide>
</slide>
于 2012-11-11T22:23:08.210 に答える