如何防止CSS NOT選擇器更改子元素的父元素

我在Jmpress.js幻燈片框架中遇到CSSNOT選擇器有問題。如何防止CSS NOT選擇器更改子元素的父元素

它使我的不活動幻燈片不透明效果很好。但是它也影響了我的活動孩子存儲在其中的父幻燈片，所以我最終將我的孩子幻燈片顯示爲不透明，即使它是活動的。

我已經收錄了正在發生的事情的視頻。

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

的幻燈片配合在一個層次，應該怎麼可見

這是有道理的，但我想會有很多的父/子關係的實例。它就像一個菜單層次結構。因此，如果我在兒童幻燈片上，那麼我希望它的父母（它變得不透明，從而影響其子女）不受影響，儘管任何其他幻燈片都設置爲不透明。

甲
- A1
- A2
乙
- B1
- B2
Ç

如果有人觀看B2那麼我想乙可見，但我想一個 & Ç是不透明的。我必須包括以下

代碼戴夫

<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>

中空吹塑

來源

2012-11-11 David Cruwys

你可以使用其他的CSS規則匹配不活躍父內部的活性格，你的1.0透明度適用於它，就像這樣：

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

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

這應該做你想做的。

來源

2012-11-11 06:02:47 Nelson

這很有道理，但我想會有很多父母/子女的關係。它就像一個菜單層次結構。因此，如果我在兒童幻燈片上，那麼我希望它的父母（變得不透明，從而影響其子女）不會受到影響，儘管其他任何幻燈片都設置爲不透明。甲 A1 A2 乙 B1 B2 Ç 如果某些酮觀看B2然後我想B到可見的，但我想A和C是不透明的。 –

好的，我已經更新了我的答案，提供了一個更一般的解決方案，只需添加另一個css規則，它將爲您的活動div設置正確的不透明度。 – Nelson

三江源納爾遜你的迴應，你給幫助解決這個問題，但需要最終我的問題的選擇要遵循

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-11 22:23:08

如何防止CSS NOT選擇器更改子元素的父元素

回答

相關問題