Question

当我将鼠标悬停在图片上时，或者text-block我希望文本块获得box-shadow时，我有一个图像和一个文本块。

问题在我尝试从图片中触发text-block时出现，它似乎特别适用于box-shadow但还有另一个像at { color它会触发。

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更具指定性

div hover trigger不使用box-shadow

1 个答案: