javascript - 鼠标悬停时的上下文菜单

Question

我的代码遇到了一个小问题:

<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>

正如你所看到的，我有一个表格到 <a href> .当我将鼠标移到 table 上时，它调用类 .test:hover > table并设置 Angular 变量 showRemove = true然后将显示 absolute div在 table 的右边。

我的问题是，当我将鼠标悬停在绝对 div 上时，它具有来自父级的 href (page/ABC) .如果我试着写 <div class="btn_remove" ng-show="showRemove"><a href="remove"><img src="../../gfx/btn_remove.png" height="28" width="26" border="0"/></a></div>然后没有任何工作，因为第一个链接没有关闭。

我怎样才能得到:

• 鼠标悬停在表格上 = 背景更改 + 链接(页面/ABC) + 在右侧显示删除图像。

• 鼠标悬停在移除图像 = 要调用的 JS 函数或任何但不属于父链接的部分。

• 鼠标移出表格或移除图像 = 移除“移除图像”并移除背景变化。

所有这一切都没有使用 jquery。 JS 或 angular，但我猜主要是 div 和 css。

解决方法:

<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

很高兴听到你成功了。

作为引用，您可以添加 javascript:;到 anchor 的 href 以使其不做任何事情。

您可以使用以下方法在悬停时选择子元素:

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

这是为需要在悬停时选择子元素的其他人准备的 fiddle jsfiddle.net/jE7J6