Trouble overlaying one div with another with JavaScript &

Trouble overlaying one div with another with JavaScript & CSS

本文关键字：with JavaScript amp another Trouble one div overlaying 更新时间：2023-09-26

这是我的目标：

当用户悬停在类"item"的一个div上时，类"menu"的另一个div应该出现在"item"div上
"menu"div的位置应该相对于"item"div
当用户解开项目"div"时，菜单div应该会消失
当用户将鼠标悬停在"menu"div上时，"menu"div不应消失，这样用户就可以单击其中的按钮

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

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

使"悬停"div成为document.body的绝对定位的子级。这适用于定位，但悬停"悬停"的div会脱离"项目"的div，我不知道如何确定新悬停的div是"悬停"
使"hover"div成为"item"div的绝对或固定位置的子级。这将"悬停"div放在"item"div下面，style.top似乎对"悬停"iv没有影响
使"hover"div成为"item"div的相对定位的子级。这将"hover"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;
}

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

最好的方法是只在可能的情况下使用CSS（没有JS）。

在这种情况下，我建议将您希望在悬停时显示的div放入作为触发器的div中。

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

CSS会是这样的：

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

有了这种技术，你甚至可以将孩子定位在父母之外，如果你离开父母，如果你仍然在孩子身上，它不会消失，因为孩子在技术上（而不是视觉上）在父母身上。您只需要确保父对象至少接触到显示的子对象，因为如果您用光标移动它们之间的间隙（光标既不会在父对象上也不会在子对象上），则子对象将消失。