将鼠标悬停在 CSS 中的 div 上时显示内容

Question

我正在使用Freewall JS 插件来生成马赛克图像网格。我还在使用opacity: 0.7 应用背景叠加颜色，当您将鼠标悬停在它上面时，背景叠加颜色会通过opacity: 0.2 变得清晰

我在每个块中也有内容，我已将其设置为默认不显示，但我无法让它在悬停时出现。

网格项目是从 javascript 生成的，因此 HTML 是一个带有 id 的空 div

jsFiddle https://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，我已经将我的 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;
    }