[英]Trouble overlaying one div with another with JavaScript & CSS
Here is my goal: 这是我的目标:
I am looking for a JavaScript and CSS solution. 我正在寻找JavaScript和CSS解决方案。 If you can help but you can only post a JQuery solution I will still appreciate it but I will have to translate it to straight JavaScript.
如果您可以提供帮助,但只能发布JQuery解决方案,我将不胜感激,但必须将其转换为纯JavaScript。
So far I have tried: 到目前为止,我已经尝试过:
Thank you for your help with this! 谢谢您的帮助!
Here is a JSFiddle that is a starting point for a solution https://jsfiddle.net/ypn5f1ng/ 这是一个JSFiddle,它是解决方案的起点https://jsfiddle.net/ypn5f1ng/
HTML HTML
<div id=content>
content
<div class=item>item 1</div>
<div class=item>item 2</div>
more content
</div>
CSS 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 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;
}
<div class='a'>
<div class="b">
<a href="a">asfdwa</a>
</div>
</div>
.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;
}
The best approach is to use CSS only if possible (no JS). 最好的方法是仅在可能的情况下使用CSS(不使用JS)。
In this situation, I would recommend to put the div you would like to display on hover into the div that is the trigger. 在这种情况下,我建议将要在悬停时显示的div放入作为触发器的div中。
<div class="parent">
<div class="child">
...
</div>
...
</div>
Than the CSS would look like this: 比CSS看起来像这样:
div.child {
display: none;
}
div.parent:hover div.child {
display: block;
}
With this technique you can position the child even to get outside the parent and it will not disappear if you get out of the parent if you are still on the child since the child is technically (not visually) in the parent. 使用此技术,您甚至可以将孩子放置在父母之外,并且如果您仍然在孩子上,那么如果您离开父母,它也不会消失,因为孩子在技术上(不是视觉上)在父母中。 You just need to make sure that the parent at least touches the displayed child since the child will disappear if you travel over the gap between them with your cursor (the cursor won't be on the parent nor on the child)
您只需要确保父母至少触摸了所显示的孩子,因为如果您用光标越过他们之间的空隙,孩子将会消失(光标不会在父母或孩子身上)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.