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

Question

I am using Freewall JS plugin to generate a mosaic image grid. I am also applying a background overlay color with opacity: 0.7 and when you hover over it, the background overlay color becomes clear with opacity: 0.2

I also have content inside each block, I've set it to display none by default but I can't get it to appear on hover.

The grid items are being generated from the javascript so the HTML is an empty div with an id

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

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

The 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
}

The JS that generates the image blocks automatically, I've added my css classes to the temp string

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

The issue is how your HTML is structured. Technically, the div where class="brick overlay-background dark" is on top of the freewall-content so you never actually hover over it. You can see this through the developer tools (f12) and looking at the live DOM tree

Change the css selector to look like -

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

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

Answer 2

Don't use display: none;

Make the opacity of the parent element 1 and then lower the opacity to so the content can be visible.

I think you're overcomplicating something that has a simple solution.

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;
    }