1

Coisa que parece simples, preciso mudar a cor do texto de um h2 e uma div, no hover de outra div.

https://codepen.io/sNniffer/pen/jXdbeE

.icone_verde
{
  background:green;
  padding:25px 40px;
  color:#fff
}

.icone_verde:hover > .feature-icon-text-title{
    color: red;
}

.icone_verde:hover > .content{
    color: red;
}
<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>

1

4 Respostas 4

5

O seletor > é apenas para selecionar elementos filhos diretos de outro elemento, não para selecionar netos ou bisnetos. Então no seu caso você basicamente precisa remover esse seletor.

Veja aqui a documentação oficial W3C: https://drafts.csswg.org/selectors-3/#child-combinators

A child combinator describes a childhood relationship between two elements. A child combinator is made of the "greater-than sign" (U+003E, >) character and separates two sequences of simple selectors.

PORTUGUÊS: "Um combinador filho descreve um relacionamento parental entre dois elementos. Um combinador filho é feito do caractere "sinal de maior" (U + 003E, > ) e separa duas sequências de seletores simples."

Veja o código funcionando.

.icone_verde
{
  background:green;
  padding:25px 40px;
  color:#fff
}

.icone_verde:hover .feature-icon-text-title{
    color: red;
}

.icone_verde:hover .content{
    color: red;
}
<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>

1

Faça como abaixo, remova o > pois ele diz que os elementos tem que ser filhos de primeira hierarquia do elemento que recebeu hover:

.icone_verde
{
  background:green;
  padding:25px 40px;
  color:#fff
}

.icone_verde:hover .feature-icon-text-title{
    color: red;
}

.icone_verde:hover .content{
    color: red;
}
<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>

1

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 é. 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:

.icone_verde
{
  background:green;
  padding:25px 40px;
  color:#fff
}

.icone_verde:hover .feature-icon-text-title{
    color: red;
}

.icone_verde:hover .content{
    color: red;
}
<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>

0

Basta remover o ">" que significa que seria o elemento filho imediato, como os elementos estão dentro de outra div o ">" faz com que a regra não se aplique, veja o resultado abaixo:

.icone_verde
{
  background:green;
  padding:25px 40px;
  color:#fff
}

.icone_verde:hover .feature-icon-text-title{
    color: red;
}

.icone_verde:hover .content{
    color: red;
}
<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>

Funcionária se os elementos fossem filhos imediatos como no exemplo abaixo

.icone_verde
{
  background:green;
  padding:25px 40px;
  color:#fff
}

.icone_verde:hover > .feature-icon-text-title{
    color: red;
}

.icone_verde:hover > .content{
    color: red;
}
<div class="icone_verde">
    <h2 class="feature-icon-text-title">ECONOMIA </h2>
    <div class="content">Pague sempre o mínimo</div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .