CODEWITHSUNDEEP
javascriptcss
John Cashew
John Cashew

Reputation: 1084

Trouble overlaying one div with another with JavaScript & CSS

Here is my goal:

  1. When the user hovers a div of class "item" another div of class "menu" should appear overlaying the "item" div.
  2. The position of the "menu" div should be relative to the "item" div.
  3. When the user unhovers the item "div" the menu div should disappear.
  4. When the user mouses over the "menu" div the "menu" div the "menu" div should not disappear so that user can click a button in it.

I am looking for a JavaScript and CSS solution. 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.

So far I have tried:

  1. To make the "hover" div an absolutely positioned child of the document.body. This works for positioning, but hovering the "hover" div unhovers the "item" div and I don't know how to figure out that the new hovered div is the "hover" div.
  2. To make the "hover" div a absolutely or fixed positioned child of the "item" div. This places the "hover" div underneath the "item" div and style.top seems to have no effect on the "hover" div".
  3. To make the "hover" div a relatively positioned child of the "item" div. This places the "hover" div within the "item" div and increases the size of the "hover" div, which I don't want.

Thank you for your help with this!

Here is a JSFiddle that is a starting point for a solution 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;
}

Upvotes: 0

Views: 43

Answers (2)

user4533873
user4533873

Reputation:

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

Upvotes: 1

dannymo
dannymo

Reputation: 408

The best approach is to use CSS only if possible (no 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 class="parent">
    <div class="child">
        ...
    </div>
    ...
</div>

Than the CSS would look like this:

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)

Upvotes: 0

Related Questions