Contextual menu on mouseover

Question

I'm facing a little problem with my code :

<style>
.btn_remove{
    position:absolute;  
    right:-25px;                        
}
.test:hover > table{
    background-color:#708ab3;           
}
</style>


<a href="page/ABC" class="test" ng-mouseenter="showRemove = true" ng-mouseleave="showRemove = false">   
<div class="btn_remove" ng-show="showRemove"><img src="../../gfx/btn_remove.png" height="28" width="26" border="0"/></div>
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td>mercedes class a</td>
            <td>70'000</td>
        </tr>               
        <tr>
            <td><i>Nice car</i></td>
            <td>Color: Red</td>                         
        </tr>                               
    </table>    
</a>

So as you can see I have a table into a <a href>. When I pass my mouse over the table it calls the class .test:hover > table and also set the angular variable showRemove = true which will then show the absolute div on the right of the table.

My problem is when I mouse over the absolute div, it has the href from the parent (page/ABC). If I try to write <div class="btn_remove" ng-show="showRemove"><a href="remove"><img src="../../gfx/btn_remove.png" height="28" width="26" border="0"/></a></div> then nothing is working because the first link isn't closed.

How could i manage to get :

• Mouseover on table = background change + link (page/ABC) + show remove image on the right.

• Mouseover on remove image = JS function to be called or whatever but do not be part of the parent link.

• Mouseout of table or remove image = remove "remove image" and remove background change.

All this without using jquery. JS or angular, but i guess it's mostly div and css.

Solution:

<style>
.test{
    position:absolute;  
    right:-25px;
    visibility:hidden;                      
}
.wrapper:hover table{
    background-color:#708ab3;           
}
.wrapper:hover .test
{
   visibility:visible;   
}
</style>
<div class="wrapper">                           
    <div class="test"><a href="remove"><img src="../../gfx/btn_remove.png" height="28" width="26" border="0"/></a></div>
    <a href="table link">                       
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td>Mercedes Class A</td>
            <td>70'000</td>
        </tr>               
        <tr>
            <td><i>Nice car</i></td>
            <td>Red</td>                            
        </tr>                               
    </table>    
    </a>
</div>
<hr/>   

Answer 1

Glad to hear you got it working.

for reference you can add javascript:; to the href of an anchor to make it not do anything.

You can select a child element on hover using:

.parent:hover .child
{
the hover styles for the child
}

here is the fiddle for anyone else who needs to select a child element on hover jsfiddle.net/jE7J6