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

不要使用display：none;

制作父元素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;
    }

将鼠标悬停在CSS

2 个答案: