title: How to make hover element inside anchor while hover the whole anchor
body: <p>i have an inline blocked div inside anchor</p>
  
  <p>HTML:
  </p>
  
  <pre><code>&lt;ul&gt;
     &lt;li&gt;
         &lt;a href=""&gt;simple
         &lt;div class='bar'&gt;
         &lt;/div&gt;
         &lt;/a&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:
  </p>
  
  <pre><code>.bar {
      width: 25px;
      height: 25px;
      background-color: red;
      display: inline-block;
  }
  .bar:hover {
      background-color: blue;
  }
  </code></pre>
  
  <p>I need to get hover effect on div while i hover the anchor, not only div.</p>
  
  <p>Also, my case is a little bit more complicated, so <strong>i cant use something like</strong>
  </p>
  
  <pre><code>a:hover .bar {
      background-color: blue;
  }
  </code></pre>
  
  <p>Here is jsfiddle with code <a href="http://jsfiddle.net/zeL102wr/2/" rel="nofollow">http://jsfiddle.net/zeL102wr/2/</a></p>