title: Contextual menu on mouseover
body: <p>I'm facing a little problem with my code :</p>
  
  <pre><code>&lt;style&gt;
  .btn_remove{
      position:absolute;  
      right:-25px;                        
  }
  .test:hover &gt; table{
      background-color:#708ab3;           
  }
  &lt;/style&gt;
  
  
  &lt;a href="page/ABC" class="test" ng-mouseenter="showRemove = true" ng-mouseleave="showRemove = false"&gt;   
  &lt;div class="btn_remove" ng-show="showRemove"&gt;&lt;img src="../../gfx/btn_remove.png" height="28" width="26" border="0"/&gt;&lt;/div&gt;
      &lt;table cellpadding="0" cellspacing="0" border="0" width="100%"&gt;
          &lt;tr&gt;
              &lt;td&gt;mercedes class a&lt;/td&gt;
              &lt;td&gt;70'000&lt;/td&gt;
          &lt;/tr&gt;               
          &lt;tr&gt;
              &lt;td&gt;&lt;i&gt;Nice car&lt;/i&gt;&lt;/td&gt;
              &lt;td&gt;Color: Red&lt;/td&gt;                         
          &lt;/tr&gt;                               
      &lt;/table&gt;    
  &lt;/a&gt;
  </code></pre>
  
  <p>So as you can see I have a table into a <code>&lt;a href&gt;</code>. When I pass my mouse over the table it calls the class <code>.test:hover &gt; table</code> and also set the angular variable <code>showRemove = true</code> which will then show the <code>absolute div</code> on the right of the table.</p>
  
  <p>My problem is when I mouse over the absolute div, it has the href from the parent <code>(page/ABC)</code>. 
  If I try to write 
  <code>&lt;div class="btn_remove" ng-show="showRemove"&gt;&lt;a href="remove"&gt;&lt;img src="../../gfx/btn_remove.png" height="28" width="26" border="0"/&gt;&lt;/a&gt;&lt;/div&gt;</code>
  then nothing is working because the first link isn't closed.</p>
  
  <p>How could i manage to get :</p>
  
  <ul>
  <li><p>Mouseover on table = background change + link (page/ABC) + show remove image on the right.</p></li>
  <li><p>Mouseover on remove image = JS function to be called or whatever but do not be part of the parent link.</p></li>
  <li><p>Mouseout of table or remove image = remove "remove image" and remove background change.</p></li>
  </ul>
  
  <p>All this without using jquery. JS or angular, but i guess it's mostly div and css.</p>
  
  <p><img src="https://i.stack.imgur.com/Bvbrm.png" alt="Wanted result"></p>
  
  <p>Solution:</p>
  
  <pre><code>&lt;style&gt;
  .test{
      position:absolute;  
      right:-25px;
      visibility:hidden;                      
  }
  .wrapper:hover table{
      background-color:#708ab3;           
  }
  .wrapper:hover .test
  {
     visibility:visible;   
  }
  &lt;/style&gt;
  &lt;div class="wrapper"&gt;                           
      &lt;div class="test"&gt;&lt;a href="remove"&gt;&lt;img src="../../gfx/btn_remove.png" height="28" width="26" border="0"/&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;a href="table link"&gt;                       
      &lt;table cellpadding="0" cellspacing="0" border="0" width="100%"&gt;
          &lt;tr&gt;
              &lt;td&gt;Mercedes Class A&lt;/td&gt;
              &lt;td&gt;70'000&lt;/td&gt;
          &lt;/tr&gt;               
          &lt;tr&gt;
              &lt;td&gt;&lt;i&gt;Nice car&lt;/i&gt;&lt;/td&gt;
              &lt;td&gt;Red&lt;/td&gt;                            
          &lt;/tr&gt;                               
      &lt;/table&gt;    
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;hr/&gt;   
  </code></pre>