title: hover effect on different classes in css
body: <p>i want have a hover effect for all elements in the follow html class</p>
  
  <p><strong>HTML</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper:hover {
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;i class="fa fa-icon"&gt; &lt;/i&gt;
    &lt;h4&gt; Headertext &lt;/h4&gt;
    &lt;p&gt; Some content text &lt;/p&gt;
    &lt;p&gt; &lt;a href="url"&gt; text &lt;/a&gt; &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The hover works on the text. The problem is, i can`t tell all elements like the icon or the header to take the hover effect at the same time.</p>