Não funciona porque ao usar o símbolo `>`, significa que o elemento alvo do `hover` deveria ser um filho direto, o que não é ([veja esta resposta][1]). Então removendo esse símbolo, o estilo será aplicado no elemento independentemente de ser filho direto ou não, basta apenas ser descendente, ou seja estar dentro da div em qualquer nível: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .icone_verde { background:green; padding:25px 40px; color:#fff } .icone_verde:hover .feature-icon-text-title{ color: red; } .icone_verde:hover .content{ color: red; } <!-- language: lang-html --> <div class="icone_verde"> <div class="vc_column-inner"> <div class="wpb_wrapper"> <div id="" class="feature-icon-text"> <h2 class="feature-icon-text-title">ECONOMIA </h2> <div class="content">Pague sempre o mínimo</div> </div> </div> </div> </div> <!-- end snippet --> [1]: https://pt.stackoverflow.com/a/252592/8063