Hover div change color on other elements

Thing that seems simple, I need to change the text color 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>
Author: hugocsl, 2019-01-14
Source

4 answers

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

See the official W3C documentation here: 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.

English: " a child combiner describes a parental relationship between two elements. A child combiner is made of the "major sign" character (U + 003e, >) and separates two sequences of simple selectors."

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>
 5
Author: hugocsl, 2019-01-14 16:54:01

Do as below, remove the > because it says that the elements have to be children of the first hierarchy 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>
 1
Author: Marciano Machado, 2019-01-14 16:43:40

Does not work because when using the > symbol, it 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 to the element regardless of whether it is a direct child or not, it is enough just to be a descendant, i.e. to 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>
 1
Author: Sam, 2019-01-14 17:21:03

Just remove the " > "which means it would be the immediate child element, as the elements are inside another div the" > " causes the rule to 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>
 0
Author: Wictor Chaves, 2019-01-14 16:45:55