title: Parent to Child hover
body: <p>i just want to ask if is there any way to do this using only css :hover or i should use jquery? I'm making a static website and just to refresh myself from backend :)</p>
  
  <p>now here's my problem</p>
  
  <pre><code>&lt;button class="btn" id="landingButton"&gt;
      &lt;div class="row row-for-button"&gt;
          &lt;div class="col-10"&gt;
              &lt;strong&gt;View my work&lt;/strong&gt;
          &lt;/div&gt;
          &lt;div class="col-2" id="arrow-right"&gt;
              &lt;ion-icon name="arrow-round-forward"&gt;&lt;/ion-icon&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>I have here a button. whenever i made the arrow-right rotate whenever i hover it. and the button changes color also when hovered . the problem is how can i make the arrow hovered to when i hover the button? because it is more like it don't rotate when i only hovered the button, i need to hover the arrow itself.</p>
  
  <p>here's my css code</p>
  
  <pre><code>     #landingButton {
           font-family: 'Comfortaa', cursive;
           border: solid 2px #e31b6d;
           color: #e31b6d;
           padding: 8px 20px;
           margin-bottom: 10px;
       }
  
       #arrow-right {
          padding-left: 0px !important;
          padding-top: 2px !important;
      }
  
     ion-icon {
         transition: all 0.4s ease;
     }
  
     ion-icon:hover {
         transform: rotateZ(90deg);
     }
  
     #landingButton:hover {
         background-color: #e31b6d;
         color: white; 
     }
  </code></pre>
  
  <p>Is there any way i could make it work using css or i should use jquery?</p>