1

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

它可以很好地使我的非活动幻灯片不透明。但这也会影响存储我的活动孩子的父幻灯片，因此即使我的孩子幻灯片处于活动状态，我最终也会显示为不透明。

我已经包含了正在发生的事情的视频。

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

适合层次结构的幻灯片应如何可见的示例

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

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

  • 一个
    • A1
    • A2
  • 乙
    • B1
    • B2
  • C

如果有人正在查看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 回答