Hey there, I'm looking to make the text change color when you hover over the entire div. Currently, only the background changes color, but I want the text to as well.
Thank you for your assistance!
.shadow-box .service-box {text-align:center;border:1px solid #f2f2f2;background:#fff;box-shadow:2px 2px 5px 0 #f5f5f5;
background: url(../userfiles/file/driehoek.png) no-repeat right top transparent;}
.service-box {padding-top: 35px; padding-left: 20px;}
.knop {width: 30%; padding-right: 10px; display: inline-table; padding-top: 5px; padding-bottom: 9px; border-radius: 10px; margin-bottom: 10px; padding-left: 14px;}
.afb-knop {width: 30px; height: 5px;}
.knop-txt {position: relative; text-align: left; width: 130px; left: 38px; color: black;}
.knop-txt a:hover {color:white !important;}
div.knop:hover {background-color:#097dbf;}
div.knop a:hover {color:#fff;}
.knop a {color:black;}<a href="/a">
<div class="knop">
<div class="afb-knop">
<img alt="" src="/userfiles/file/cms.png" />
</div>
<div class="knop-txt">
CMS
</div>
</div>
</a>
<a href="/a">
<div class="knop">
<div class="afb-knop"><img alt="" src="/userfiles/file/logo.png" /></div>
<div class="knop-txt">Logo</div>
</div></a>
<div class="knop">
<div class="afb-knop"><a href="/a"><img alt="" src="/userfiles/file/starterpakket.png" /> </a></div>
<div class="knop-txt"><a href="/a">Starter Pack</a></div>
</div>