javascript - 使用 JavaScript 和 CSS 将一个 div 与另一个 div 重叠时出现问题

Question

这是我的目标:

1. 当用户将鼠标悬停在“item”类的 div 上时，“menu”类的另一个 div 应该出现在“item”div 之上。
2. “菜单”div 的位置应相对于“元素”div。
3. 当用户取消悬停元素“div”时，菜单 div 应该消失。
4. 当用户将鼠标悬停在“菜单”div 上时，“菜单”div 不应消失，以便用户可以单击其中的按钮。

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

到目前为止我已经尝试过:

1. 使“悬停”div 成为 document.body 的绝对定位子元素。这适用于定位，但悬停“悬停”div 会取消悬停“元素”div，我不知道如何确定新悬停的 div 是“悬停”div。
2. 使“悬停”div 成为“元素”div 的绝对或固定定位的子元素。这会将“悬停”div 置于“元素”div 下方，而 style.top 似乎对“悬停”div 没有影响。
3. 使“悬停”div 成为“元素”div 的相对定位的子元素。这会将“悬停”div 置于“元素”div 中并增加“悬停”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;
}