title: How can I activate the hover of a div inside of other div?
body: <p>I want to activate the hover state on <code>arrowBox</code> when I click on the div <code>antrenor</code></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>.arrowBox:after {
    content: ' ';
    width: 0px;
    height: 0px;
    border-top: 17px solid transparent;
    border-left: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 17px solid #2391af;
    position: absolute;
    right: 104px;
    top: 50%;
    margin-top: -17px;
    opacity: 1;
    transition: 0.5s;
  }
  
  .arrowBox:hover:after {
    opacity: 1;
    right: 100%;
    top: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="antrenor"&gt;
    &lt;div class="arrowBox" style="margin-right:110px"&gt;Antrenor&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>