这是我的目标:
- 当用户悬停在类"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;
}
有了这种技术,你甚至可以将孩子定位在父母之外,如果你离开父母,如果你仍然在孩子身上,它不会消失,因为孩子在技术上(而不是视觉上)在父母身上。您只需要确保父对象至少接触到显示的子对象,因为如果您用光标移动它们之间的间隙(光标既不会在父对象上也不会在子对象上),则子对象将消失。