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

问题描述

当我将鼠标悬停在图像或text-block我希望文本块获得box-shadow.

当我尝试从图像触发时，问题text-block就来了，它似乎并不适用，尤其是在box-shadow使用另一个像 color它触发的 attr 时。

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

标签： htmlcss

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

问题描述

解决方案

推荐阅读