Question

这是我的目标：

当用户悬停类“item”的div时，另一个类“menu”的div应该显示为覆盖“item”div。
“menu”div的位置应该相对于“item”div。
当用户取消项目“div”时，菜单div应该消失。
当用户将鼠标悬停在“菜单”div上时，“菜单”div“菜单”div不应消失，以便用户可以单击其中的按钮。

我正在寻找JavaScript和CSS解决方案。如果你能提供帮助，但你只能发布一个JQuery解决方案，我仍然会很感激，但我必须将它翻译成直接的JavaScript。

到目前为止，我已经尝试过：

使“hover”div成为document.body的绝对定位子。这适用于定位，但是悬停“悬停”div会取消“item”div并且我不知道如何弄清楚新悬停的div是“悬停”div。
使“悬停”div成为“item”div的绝对或固定位置的子项。这将“悬停”div放在“item”div和style.top下面似乎对“hover”div“没有影响”。
使“悬停”div成为“item”div的相对定位子项。这将“悬停”div放在“item”div中，并增加了“hover”div的大小，这是我不想要的。

感谢您对此的帮助！

这是一个JSFiddle，它是解决方案https://jsfiddle.net/ypn5f1ng/

HTML

<div id=content>
    content
    <div class=item>item 1</div>
    <div class=item>item 2</div>
    more content
</div>

CSS

body {  background:green; }

#content { z-index:100; width:500px; position:absolute; left:0px; right:0px; margin-left:auto; margin-right:auto; background:white; margin-top:10px;  background:lightblue; padding:5px; }

div.item { background:pink; margin:5px}

div.hover { background:yellow; height:15px; width:100px; z-index:101; position:fixed }

的JavaScript

function getElem(event) {
    if (!event) {
        event = window.event;
    }

    var elem = null;
    if (event.target) {
        elem = event.target;
    } else if (event.srcElement) {
        elem = event.srcElement;
    }

    if (elem && elem.nodeType == 3) {
        elem = elem.parentNode;
    }

    return elem;
}

var hoverDiv = null;

function onItemMouseOver(event) {
    var elem = getElem(event);

    if (!hoverDiv) {
        hoverDiv = document.createElement('DIV');
        hoverDiv.className = "hover";
        document.body.appendChild(hoverDiv);
        //elem.appendChild(hoverDiv);
        hoverDiv.style.right=100;
        hoverDiv.style.top=-100;
    }
}

function onItemMouseOut(event) {
    if(hoverDiv) {
        hoverDiv.parentNode.removeChild(hoverDiv);
        hoverDiv = null;
    }
}

var items = document.getElementsByClassName("item");
for(var i = 0; i < items.length; ++i) {
   var item = items[i];
   item.onmouseover = onItemMouseOver;
   item.onmouseout = onItemMouseOut;
}

Answer 1

fiddle

HTML

<div class='a'>
    <div class="b">
        <a href="a">asfdwa</a>
    </div>
</div>

CSS

.a {
    position: relative;
    width: 300px;
    height: 300px;
    background: lightgray;
}

.b {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 80px;
    background: pink;
    opacity: 0;
    transition: .2s opacity ease-in-out;
}

.b a {
    display: block;
    margin: 1rem;
}

.a:hover .b {
    opacity: 1;
}

Answer 2

最好的方法是尽可能使用CSS（没有JS）。

在这种情况下，我建议将你想要显示的div悬停在作为触发器的div中。

<div class="parent">
    <div class="child">
        ...
    </div>
    ...
</div>

比CSS看起来像这样：

div.child {
    display: none;
}
div.parent:hover div.child {
    display: block;
}

使用这种技术，您可以将孩子定位在父母之外，如果您离开父母，如果您仍然在孩子身边，它将不会消失，因为孩子在父母的技术上（不是视觉上）。你只需要确保父母至少接触到所显示的孩子，因为如果你用光标在他们之间的间隙行走，孩子就会消失（光标不会在父母身上，也不会在孩子身上）

麻烦用JavaScript和＆amp;覆盖一个div与另一个div CSS

2 个答案:

HTML

CSS