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>的表格。当我将鼠标移到桌子上时，它会调用班级.test:hover > table并设置角度变量showRemove = true，然后会在桌子右侧显示absolute div。

我的问题是，当我将鼠标悬停在绝对div上时，它具有来自父(page/ABC)的href。如果我试着写 <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）+在右侧显示删除图像。
鼠标悬停在remove image =要调用的JS函数或其他任何但不属于父链接的部分。
暂停表格或删除图片=删除“删除图片”并删除背景更改。

所有这些都不使用jquery。 JS或角度，但我猜它主要是div和css。

Wanted result

解决方案：

<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：;到锚的href，使它不做任何事情。

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

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

这是其他任何需要在悬停时选择子元素的人的小提琴jsfiddle.net/jE7J6

鼠标悬停的上下文菜单

1 个答案: