Div hover change color in other elements

Question

Something that seems simple, I need to change the color of the text of an H2 and a div, in the Hover of another 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>

Answer 1

The selector > is only to select direct child elements from another element, not to select grandchildren or great-grandchildren. So in your case you basically need to remove this selector.

See here the official W3C documentation: https://drafts.csswg.org/selectors-3/#Child-combinators

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: "A child combinator describes a parental relationship between two elements. A child combinator is made of the "greater sign" character (U + 003E, > ) and separates two single selector sequences."

See the code working.

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

Answer 2

Do as below, remove the > because he says that the elements have to be first hierarchy children of the element that received 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>

Answer 3

It doesn’t work because when using the symbol >, means that the target element of hover should be a direct child, which it is not. So by removing this symbol, the style will be applied in the element regardless of whether you are a direct child or not, just be a descendant, that is to say be inside the div at any level:

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

Answer 4

Just remove the ">" which means it would be the immediate child element, as the elements are inside another div the ">" causes the rule not apply, see the result below:

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

Employee if the elements were immediate children as in the example below

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