徘徊褪色背景

對不起，如果我複製，但我真的陷入了一個點，我嘗試了每個可能的解決方案，我已經閱讀了這裏，並使用Google搜索，失敗了我。徘徊褪色背景

我想實現，當div徘徊時，所有背景都褪色。所有的背景 - 我的意思是在網站旁邊的懸停div應該出現在頂部的一切。當div懸停時，所有背景都應該回到清晰狀態。

也許這是簡單的方式來實現這一目標，但相信我 - 迄今爲止沒有什麼工作，我想..所以，請 - 幫我:)

<body> 
<div class="block1"> 
<div id="text"> 
    one 
</div> 
</div> 
<div class="block"> 
    <div id="text"> 
     two 
    </div> 
</div> 
</body>

裝上的jsfiddle： https://jsfiddle.net/ryfgwswo/1/

來源

2016-06-13 Katerina

歡迎堆棧溢出！請澄清您的具體問題或添加更多的細節，以確切地突出你所需要的。正如目前所寫，很難確切地說出你在問什麼。 –

你想實現的東西叫做「模態窗口」。簡單的w3School也將引導你http://www.w3schools.com/howto/howto_css_modals.asp請評論，如果它不是你想要的 –

你想要這樣嗎？

body,html { 
 
    margin: 0; 
 
    padding: 0; 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
#text { 
 
\t text-align: center; 
 
\t padding: 20px; 
 
\t color: #cfcaca; 
 
} 
 

 
.block1 { 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t background: black; 
 
\t border: 2px solid #cfcaca; 
 
\t margin: 100px 100px; 
 
\t -moz-box-shadow: 0 0 1px #4e4848; 
 
\t box-shadow: 0 0 1px #4e4848; 
 
\t position: absolute; 
 
\t display: block; 
 
\t transition: 2s all ease-in-out; 
 
} 
 

 
.block1:hover { 
 
\t width: 500px; 
 
\t height: 500px; 
 
\t margin: 0 auto; 
 
\t background:rgba(0,0,0,0.4); 
 
\t border: 2px solid #cfcaca; 
 
\t -moz-box-shadow: 0 0 1px #4e4848; 
 
\t box-shadow: 0 0 1px #4e4848; 
 
\t display: block; 
 
\t z-index: 100; 
 
} 
 

 
.block { 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t background: #000; 
 
\t border: 2px solid #cfcaca; 
 
\t margin: 100px 300px; 
 
\t -moz-box-shadow: 0 0 1px #4e4848; 
 
\t box-shadow: 0 0 1px #4e4848; 
 
\t transition: 2s all ease-in-out; 
 
\t position: absolute; 
 
\t display: block; 
 
} 
 

 
.block:hover { 
 
\t width: 300px; 
 
\t height: 300x; 
 
\t margin: 100 auto; 
 
\t background: rgba(0,0,0,0.4); 
 
\t border: 2px solid #cfcaca; 
 
\t -moz-box-shadow: 0 0 1px #4e4848; 
 
\t box-shadow: 0 0 1px #4e4848; 
 
\t display: block; 
 
\t z-index: 101; 
 
}

<body> 
 
    <div class="block1"> 
 
    <div id="text"> 
 
     one 
 
    </div> 
 
    </div> 
 
    <div class="block"> 
 
\t \t <div id="text"> 
 
\t \t \t two 
 
\t \t </div> 
 

 
</div> 
 
</body>

來源

2016-06-13 11:45:43

其實，我希望它是相反 - 褪色的背景，而徘徊div :)到更具體 - div應該是明確的，但頁面上的其他材料應該褪色.. – Katerina

要在另一個DIV申請懸停效果，第二個div需要來第二次在HTML。

我只是在body內部創建了一個div，但在「block1」和「block」之後，並且爲它應用了背景顏色以及不透明度轉換。

.background { 
    height: 100%; 
    width: 100%; 
    opacity: 1; 
    background-color: rgb(255,0,255); 
} 

.block:hover + .background { 
    opacity: 0; 
    transition: 2s all ease-in-out; 
} 
.block1:hover ~ .background { 
    opacity: 0; 
    transition: 2s all ease-in-out; 
}

和HTML：

<body> 
    <div class="block1"> 
    <div id="text"> 
     one 
    </div> 
    </div> 
    <div class="block"> 
     <div id="text"> 
      two 
     </div> 
</div> 
<div class="background"> 
</div> 
</body>

下面的代碼： https://jsfiddle.net/ryfgwswo/4/

來源

2016-06-13 12:28:35

我可能沒有指定足夠我的問題。我希望div始終保持清晰，但要淡出所有頁面。在你的例子中 - 當我徘徊div ONE或div TWO時，粉色背景應該消失。 – Katerina

在這種情況下，這很容易。只需將第二個懸停效果添加到div 1（查看我的示例，我更新了它）。如果那不是你想要的，那麼我沒有正確理解你的問題。 https://jsfiddle.net/ryfgwswo/4/ –

好的，這是一個簡單的例子，因爲你可以使用背景div作爲靜態。其他divs呢？（我的意思是像IMG或文本），他們必須是可見的，而主要div在徘徊和出去，但我也想淡化它們。在CSS中可能嗎？或者我應該使用JavaScript呢？無可否認，我想使用CSS。我也嘗試在新的背景中使用新的div（main）作爲新的背景，同時懸停目標div（在本例中稱其爲div ONE）。但他們不能合作 - 在css既不是「+」也不是「〜」，甚至在他們之間停頓。 – Katerina

徘徊褪色背景

回答

相關問題