html - div 悬停触发器不适用于 box-shadow

Question

我有一张图片，上面有一个文本 block ，当我将鼠标悬停在图片或 text-block 上时，我希望文本 block 得到一个 框-阴影。

问题 当我尝试从图像触发 text-block 时，它似乎不起作用，尤其是 box-shadow 还有另一个属性，比如color 它会触发。

这是一个 fiddle :https://jsfiddle.net/x5Lr32xb/

HTML

<ul id="button-container">
            <li>
                <a href="#">
                    <img class="htmllogo" src="images/HTMLLogo.png">
                    <div class="html-text-block">
                        <h2>HTML</h2>
                        <p>My web projects</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="csharplogo" src="images/CSHARPLogo.png">
                    <div class="cs-text-block">
                        <h2>C#</h2>
                        <p>My windows projects</p>
                    </div>
                </a>
            </li>
        </ul>

CSS

/*Containers*/
#button-container {
    padding: 0;
    margin:0;

    list-style: none;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;

    margin-top: 33vh;
    margin-left: 50vw;
    transform: translate(-50%, -50%); 

    width: 90vw;
    height: 56vh;

    align-items: center;
}

#button-container li {
    position: relative;
    display: inline-block;

}

#button-container .html-text-block, .cs-text-block {    
    position: absolute;
    bottom: 0px;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding-left: 5px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    transition: box-shadow 0.5s cubic-bezier(.25,.8,.25,1);
}


/*Hovers*/
#button-container .html-text-block:hover, .cs-text-block:hover{
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

img:hover + .html-text-block {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

Answer 1

你必须使用这个:

#button-container img:hover + .html-text-block

#button-container .html-text-block 比 .html-text-block 更具体