徘徊褪色背景

对不起，如果我复制，但我真的陷入了一个点，我尝试了每个可能的解决方案，我已经阅读了这里，并使用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

徘徊褪色背景

回答

相关问题