wordpress css悬停问题

Question

HTML

我的CSS

.bezoek_toonzaal{
background-image: url(../wp-content/uploads/2018/03/sanotech-website-home-button-contact.png);
background-repeat: no-repeat;
background-size: cover;
background-position: left bottom;
height: 200px;
width: 300px;
padding-top: 20px;
}

.ontdek_merken{
background-image: url(../wp-content/uploads/2018/03/sanotech-website-buttons.png);
background-repeat: no-repeat;
background-size: cover;
background-position: left bottom;
margin-top: 15px;
padding-top: 22px;
height: 80px;
width: 300px;
}

.toonzaal_wrap:hover .bezoek_toonzaal h4 span{
color: #005471 !important;
}

.toonzaal_wrap:hover .bezoek_toonzaal p{
color: #bdbec0 !important;
}

.toonzaal_wrap:hover .bezoek_toonzaal span{
color: #bdbec0 !important;
}

.toonzaal_wrap:hover .bezoek_toonzaal a{
color: #bdbec0 !important;
}

.toonzaal_wrap:hover .ontdek_merken span{
color: #005471 !important;
}

.bezoek_toonzaal:hover{
color: #005471 !important;
background-image: url(../wp-content/uploads/2018/03/sanotech-website-home-button-contact-wit.png);
background-repeat: no-repeat;
background-size: cover;
background-position: left bottom;
height: 200px;
width: 300px;
padding-top: 20px;
}

.bezoek_toonzaal h4 span:hover{
color: #005471 !important;
}

.ontdek_merken:hover{
background-image: url(../wp-content/uploads/2018/03/sanotech-website-projecten-achtergrond-grote-balk-projecten-wit.png);
background-repeat: no-repeat;
background-size: cover;
background-position: left bottom;
margin-top: 15px;
padding-top: 22px;
height: 80px;
width: 300px;
color: #005471 !important;
}

类：

如果另一个元素正在悬停，则标记为红色的文本应保持相同的颜色（白色= #FFF）。 在这种情况下不知道如何做到这一点。 我已经添加了当前的不同场景。 还添加了类。

如果您有任何疑问或想要任何补充信息，请随时提出！

Answer 1

最好创建一个jsfiddle并包含html。但首先尝试下面的内容：

您必须将color: #FFF添加到.bezoek_toonzaal

.bezoek_toonzaal{
    background-image: url(../wp-content/uploads/2018/03/sanotech-website-home-button-contact.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left bottom;
    height: 200px;
    width: 300px;
    padding-top: 20px;
    color: #FFF
}

您必须从color: #005471 !important;

中删除.ontdek_merken:hover

.ontdek_merken:hover{
    background-image: url(../wp-content/uploads/2018/03/sanotech-website-projecten-achtergrond-grote-balk-projecten-wit.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left bottom;
    margin-top: 15px;
    padding-top: 22px;
    height: 80px;
    width: 300px;
}

Answer 2

自己找到它：

CSS

.bezoek_toonzaal:hover{
    color: #005471 !important;
    background-image: url(https://sanotech.my-tagit.be/wp-content/uploads/2018/03/sanotech-website-home-button-contact-wit.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left bottom;
    height: 200px;
    width: 300px;
    padding-top: 20px;
}

.ontdek_merken:hover{
        background-image: url(https://sanotech.my-tagit.be/wp-content/uploads/2018/03/sanotech-website-projecten-achtergrond-grote-balk-projecten-wit.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left bottom;
    margin-top: 15px;
    padding-top: 22px;
    height: 80px;
    width: 300px;
}

.toonzaal_wrap .bezoek_toonzaal:hover h4 span{
    color: #005471 !important;
}

.toonzaal_wrap .ontdek_merken:hover span{
    color: #005471 !important;
}


.toonzaal_wrap .bezoek_toonzaal :hover span{
    color: #bdbec0 !important;
}

.toonzaal_wrap .bezoek_toonzaal:hover a{
    color: #bdbec0 !important;
}