淡出整個頁面，除了純Javascript中的某些元素

在以下HTML中，我有一個兩個div面板。一個是可拖動元素，另一個是可拖動div的主區域。當開始拖動時，我希望主區域淡出，除了少數幾個使用每個拖動事件動態計算的div。我正在使用.fade-out類，但它並不真正起作用，因爲實際應用程序的div區域太多，因此通過所需div的HTML集合無法工作。那麼最好的方法是什麼，最好只使用JavaScript？淡出整個頁面，除了純Javascript中的某些元素

<div class="side-panel"> 
    <div draggable="true" ondrag="drag(event)"></div> 
    <div draggable="true" ondrag="drag(event)"></div> 
    <div draggable="true" ondrag="drag(event)"></div> 
    <div draggable="true" ondrag="drag(event)"></div> 
</div> 
<div class="main-area"> 
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
</div> 


.fade-out { 
    filter: alpha(opacity=80); 
    opacity: 0.2; 
}

來源

2017-02-12 user2992672

能做到這一點使用CSS'visibility'但要做到不透明度將需要轉移這些元素進行的主要和使用定位他們。否則，他們繼承父opactiy – charlietfl

_「使用.fade-out類，但它並不真的工作，因爲實際的應用程序有太多的div作爲主區域的孩子，所以通過所需div的HTML集合不會工作「_你是什麼意思」不起作用「？你可以創建一個stacksnippets來演示你所嘗試過的嗎？ – guest271314

我認爲唯一的辦法就是給alpha值賦予顏色和背景色，而不是改變不透明度。所以，這取決於你在主區div內的每個div裏面有什麼。

一個例子是，考慮到你有背景顏色和/或一些文字，在每個這些div的，你可以給有屬性的類

.fade-out { 
    background: rgba(0, 0, 0, 0.6); 
    color: rgba(255, 255, 255, 0.6); 
}

然後，對每個格，其不透明度沒有按」 T改變，你可以給

.normal-opacity { 
    background: rgba(0, 0, 0, 1); 
    color: rgba(255, 255, 255, 1); 
}

來源

2017-02-12 17:46:10 Visrozar

/* 
 
For demo 
 
*/ 
 
.main-area > * { 
 
    width : 35px; 
 
    height : 35px; 
 
    display : inline-block; 
 
    background : purple; 
 
} 
 

 

 
.main-area.fade-out-unnecessary-children > :not(.wont-fade-out){ 
 
    filter: alpha(opacity=80); 
 
    opacity: 0.2; 
 
}

<div class="side-panel"> 
 
    <div draggable="true" ondrag="drag(event)"></div> 
 
    <div draggable="true" ondrag="drag(event)"></div> 
 
    <div draggable="true" ondrag="drag(event)"></div> 
 
    <div draggable="true" ondrag="drag(event)"></div> 
 
</div> 
 
<div class="main-area fade-out-unnecessary-children"> 
 
    <div class="wont-fade-out" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
    <div class="wont-fade-out" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
</div>

「當拖動開始時，我希望主區域淡出，除了少數幾個使用每個拖動事件動態計算的div。」
」 ......實際應用中有太多的div作爲主區的孩子們，通過所需的div的HTML集合是行不通的那麼回事。‘

1）如果可以檢測到’幾個div的 「這不應該淡出,在這些的每一個上添加一個類（.wont-fade-out）。

<!-- Child element --> 
<div class="wont-fade-out" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

2）在.main-area添加一個類以及（.fade出-不必要子女）。

<div class="main-area fade-out-unnecessary-children"> 
    <div ondrop="drop(event)" ondragover="allowDrop(event)" class="wont-fade-out" ></div> 
    <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
</div>

3）後，你可以做一切與CSS

.main-area.fade-out-unnecessary-children > :not(.wont-fade-out){ 
    filter: alpha(opacity=80); 
    opacity: 0.2; 
}

來源

2017-02-12 18:09:52 Marian07

淡出整個頁面，除了純Javascript中的某些元素

回答

相關問題