Question

我在Jmpress.js幻灯片框架中遇到了CSS NOT 选择器的问题。

它非常适合使我的非活动幻灯片不透明。但是它也影响了我的活跃孩子存储在其中的父幻灯片，所以我最终得到了我的子幻灯片，即使它处于活动状态，也显示为不透明。

我已经收录了正在发生的事情的视频。

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

如何显示适合层次结构的幻灯片的示例

这是有道理的，但我想会有很多父/子关系。它就像一个菜单层次结构。

因此，如果我在儿童幻灯片上，那么我希望它的父母（它变得不透明，从而影响其子女）不受影响，但任何其他幻灯片都设置为不透明。

甲
- A1
- A2
乙
- B1
- B2
C

如果有人正在查看 B2 ，那么我希望 B 可见，但我想 A ＆amp; 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>

Blow Blow

Answer 1

您可以使用另一个css规则来匹配非活动父级内的活动div，并将1.0不透明度应用于它，如下所示：

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

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

那应该做你想要的。

Answer 2

谢谢你的回复，你给出的选择有助于解决问题，但最终我的问题需要通过以下方式解决

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>

如何防止CSS NOT选择器改变子元素的父元素

2 个答案: