Question

当我将鼠标悬停在图像上时，它将删除灰度滤镜。因为我的div中有link-box，所以在CSS中具有图像专有性，因此它将过滤器应用于该div中的所有内容（包括我不想应用的文本）。所以我的问题是：如何使该过滤器不适用于链接盒div（文本）？仅当我将HTML代码链接框从维修div移到外面时？

我有这个html：

<div id="repairs-pos" onmouseover="increaseWidth2()" onmouseout="normalize()">
    <div id="repairs">
        <a href="store/workshop.html" class="link-box" id="textBox2">
            <h3 class="images-heading">Workshop</h3>
            <p class="images-quotes">If you can break it, we can fix it.</p>
        </a>
    </div>
</div>

HTML code 这是CSS：

#repairs-pos {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 33.4%;
    width: 33.4%;
    height: 100%;
    z-index: 0;
    transition: all .3s ease-in-out;
}

#repairs {
    background-image: url(../Images/Shop/Repair-min.jpg);
    background-repeat: no-repeat;
    background-size: 150vh;
    background-position: 30%;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    transition: all .3s ease-in-out;
}

#repairs:hover {
    filter: none;
}

.link-box,
.link-box:hover {
    position: relative;
    display: block;
    top: 10%;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    width: 75%;
    height: 80%;
    text-decoration: none;
    z-index: 4;
    color: inherit;
    transition: all .4s;
}

.link-box:hover {
    color: inherit;

}

.images-heading {
    position: relative;
    text-align: center;
    top: 47%;
    font-size: 2.8rem;
    font-family: Lato;
    font-weight: 700;
    z-index: 2;
}

.images-quotes {
    position: relative;
    text-align: center;
    top: 50%;
    font-size: 1.8rem;
    font-weight: 900;
}

CSS IMAGE

Answer 1

如果您不希望将灰度滤镜应用于div中的文本，请在#repairs div悬停时为其类设置灰度滤镜。

#repairs-pos {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 33.4%;
    width: 33.4%;
    height: 100%;
    z-index: 0;
    transition: all .3s ease-in-out;
}

#repairs {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTV-XL-dvaC-cblm2rqA7am9z2-54v_mGnaLDokhZQqEJbXFduZng");
    background-repeat: no-repeat;
    background-size: 150vh;
    background-position: 30%;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    transition: all .3s ease-in-out;
}

#repairs:hover{
    filter: none;
}
#repairs:hover .images-heading, .images-quotes{
   -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

<div id="repairs-pos">
        <div id="repairs">
            <a href="store/workshop.html" class="link-box" id="textBox2">
                <h3 class="images-heading">Workshop</h3>
                <p class="images-quotes">If you can break it, we can fix it.</p>
            </a>
        </div>
    </div>

div的过滤器适当性如何不会影响div内部的文本？

1 个答案: