在CSS中悬停div时显示内容

Question

我正在使用Freewall JS插件生成镶嵌图像网格。我也想申请一个背景颜色叠加与opacity: 0.7，当你在它悬停，背景叠加颜色变得与opacity: 0.2

我也有每一块里面内容清楚，我已经将它设置为默认显示没有，但我可以不要让它出现在悬停中。

网格项目正在从JavaScript的产生，因此HTML是一个id

的jsfiddlehttps://jsfiddle.net/3o63eor8/3/

<div id="freewall" class="free-wall"></div> 

的CSS

.overlay-background { 
    position: relative; 
} 
.overlay-background:before{ 
    position: absolute; 
    content:" "; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    display: none; 
    z-index:0; 
} 
.overlay-background:before{ 
    display: block; 
} 
.dark:before { 
    background-color: rgba(0,0,0,0.7); 
} 
.free-wall { 
    width: 100%; 
    height: 100%; 
} 
#freewall .dark:hover::before { 
    background-color: rgba(0,0,0,0.2); 
} 
#freewall .freewall-content span { 
    display: none 
} 
#freewall .freewall-content:hover span { 
    display: block 
} 

的JS空白的div自动生成图像块，我已将我的css类添加到temp字符串

var temp = "<div class='brick overlay-background dark' style='width:{width}px; " + 
    "height: {height}px; " + 
    "background-image: url(assets/images/posts/post-{index}.jpg); " + 
    "background-repeat: no-repeat; " + 
    "background-size: cover; " + 
    "background-position: center center;" + 
    "background-color: {color}'>" + 
    "<div class='v-center text-center freewall-content'><span><i class='fa fa-search'></i></span></div>" + 
    "</div>"; 

var colour = [ 
    "rgb(142, 68, 173)", 
    "rgb(243, 156, 18)", 
    "rgb(211, 84, 0)", 
    "rgb(0, 106, 63)", 
    "rgb(41, 128, 185)", 
    "rgb(192, 57, 43)", 
    "rgb(135, 0, 0)", 
    "rgb(39, 174, 96)" 
]; 

var w = 1, h = 1, html = '', color = '', limitItem = 17; 
for (var i = 0; i < limitItem; ++i) { 
    h = 1 + 3 * Math.random() << 0; 
    w = 1 + 3 * Math.random() << 0; 
    color = colour[colour.length * Math.random() << 0]; 
    html += temp.replace(/\{height\}/g, h*150).replace(/\{width\}/g, w*150).replace("{color}", color).replace("{index}", i + 1); 
} 
$("#freewall").html(html); 

Answer 1

问题是你的HTML结构如何。从技术上讲，div其中class="brick overlay-background dark"位于freewall-content之上，因此您绝对不会将其悬停在其上。您可以通过开发者工具（F12），并观察实时DOM树

更改CSS选择器看起来像看到这 -

.brick.overlay-background.dark:hover .freewall-content .span { 
    display: block 
} 

https://jsfiddle.net/3o63eor8/8/

Answer 2

不要使用显示：无;

制作父元素1的不透明度，然后降低不透明度以使内容可见。

我认为你过于复杂的东西有一个简单的解决方案。

https://jsfiddle.net/erwdepqp/

.brick { 
     width: 300px; 
     height: 300px 
    } 
    .overlay-background { 
     position: relative; 
    } 
    .overlay-background:before{ 
     position: absolute; 
     content:" "; 
     top:0; 
     left:0; 
     width:100%; 
     height:100%; 
     display: none; 
     z-index:0; 
    } 
    .overlay-background:before{ 
     display: block; 
    } 
    .dark:before { 
     background-color: rgba(0,0,0, 1); 
    } 
    .dark:hover::before { 
     background-color: rgba(0,0,0,0.2); 
    } 
    .freewall-content:hover span { 
     display: block; 
    }