Question

我试图在用户将鼠标悬停在图片上后显示绝对定位的div #menu，默认状态top: -9999px; left: -9999px（所以它应该像top: 100px; left: 20px）。

但它并没有以这种方式为我工作。

看看我的JSFiddle，也许有一些错误：

这是我的Css：

#menu{
height: 350px;
width: 280px;
position: absolute;
left: -9999px;
top: -9999px;
background-color: lightblue;
}

Here is my Fiddle

我该如何解决这个问题？

Answer 1

以下内容将帮助您获得所需内容：

<强> DIV

<div class="menu">
    hi
</div>

<强> CSS

 .menu {
    margin: 10px;
    width: 50px;
    height: 50px;
    background-color: #06F;
    color: #fff;
    position: absolute;
    left: 10px;
    top: 0;
    }

.menu:hover {
     position: absolute;
    left: 0;
    top: 0;
}

DEMO

Answer 2

好的，我找到了解决方案。 img:hover + #menu必须有加号。我使用opacity代替-9999px。

#menu{
    height: 350px;
    width: 280px;
    position: absolute;
    z-index: 999;
    left: 200px;
    top: 100px;
    background-color: lightblue;
    opacity: 0;
}

#img{
    height: 300px;
    width: 300px;
}
#img:hover + #menu{
    opacity: 1;    
}

悬停img显示绝对定位的div不起作用

2 个答案: