CODEWITHSUNDEEP
javascripthtmlcssonmouseover
Logi123
Logi123

Reputation: 11

How to keep div visible after showing it with "onmouseover" and putting mouse over it

I'm trying to do a menu, which will be expanded when mouse will be over a button (like in attached jsfiddle)

HTML:

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="menu">
            <ul>
                <li>
                    <div id="hover" onmouseover="document.getElementById('stuff').style.opacity = 1.0;" onmouseout="setTimeout(function(){document.getElementById('stuff').style.opacity = 0.0;}, 3000);">
                        <a href="">Button</a>
                    </div>
                </li>
            </ul>

        </div>

        <div class="col-lg-9 col-md-9 col-sm-6 col-xs-12" id="main">
            <div id="stuff">stuff</div>
        </div>
    </div>
</div>

CSS:

    #stuff {
    height: 600px;
    width: 100px;
    background-color: red;
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

https://jsfiddle.net/bfkxmghd/2/

The menu appears like it should and I'm delaying the closing of it for 3 seconds with setTimeOut, but how can I keep it open if I move the mouse to the stuff div? I've tried to use onmouseover="document.getElementById('stuff').style.opacity = 1.0;, but in this case, it appears even without putting mouse over hover div first.

Upvotes: 0

Views: 783

Answers (4)

ken_o
ken_o

Reputation: 384

You can save a reference to the timeout function and then use clearTimout to cancel it.

onmouseout="stuffTimeoutID = setTimeout(function(){document.getElementById('stuff').style.opacity = 0.0;}, 3000);"

then

<div id="stuff" onmouseover="clearTimeout(stuffTimeoutID)">

Upvotes: 0

Alejalapeno
Alejalapeno

Reputation: 1008

If you can move the submenu to a sibling position or a nested position you can achieve the same effect with just CSS.

The CSS target :hover allows you to apply CSS only on hover. If your submenu is next to the element you are hovering you can use the + to select it as a sibling. To keep the #stuff menu open you just need to make sure that you apply the same hover rule to it as well.

Example:

https://jsfiddle.net/bfkxmghd/4/

Upvotes: 0

Mitch Lillie
Mitch Lillie

Reputation: 2407

Just need to call clearTimeout on the timeout you save. No need for jQuery.

var timeout

function showMenu () {
  clearTimeout(timeout)
  document.getElementById('stuff').style.opacity = 1.0;
  timeout = setTimeout(function(){document.getElementById('stuff').style.opacity = 0.0;}, 3000);
}

function hideMenu () {
  clearTimeout(timeout)
  document.getElementById('stuff').style.opacity = 0.0;
}

function keepMenu () {
  clearTimeout(timeout)
}

var hover = document.getElementById('hover')
hover.onmouseover = showMenu

var stuff = document.getElementById('stuff')
stuff.onmouseover = keepMenu
stuff.onmouseout = hideMenu
    #stuff {
        height: 600px;
        width: 100px;
        background-color: red;
        opacity: 0.0;
        -webkit-transition: all 500ms ease-in-out;
        -moz-transition: all 500ms ease-in-out;
        -ms-transition: all 500ms ease-in-out;
        -o-transition: all 500ms ease-in-out;
        transition: all 500ms ease-in-out;
    }
<div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="menu">
                <ul>
                    <li>
                        <div id="hover">
                            <a href="">Button</a>
                        </div>
                    </li>
                </ul>

            </div>

            <div class="col-lg-9 col-md-9 col-sm-6 col-xs-12" id="main">
                <div id="stuff">stuff</div>
            </div>
        </div>
    </div>

Upvotes: 0

muratkh
muratkh

Reputation: 123

You can achieve this using jquery .mouseenter or .mouseover and .mouseleave function here is the code i already tested this on codepen http://codepen.io/muratkh/pen/dNqxXM

$(document).ready(function() {
  $('#hover').mouseover(function() {
    $('#stuff').css("opacity",1);
  });
  $('#hover').mouseleave(function() {
    $('#stuff').css('opacity',0);
  })
});

css is same

html

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="menu">
            <ul>
                <li>
                    <div id="hover">
                        <a href="">Button</a>
                      <div class="col-lg-9 col-md-9 col-sm-6 col-xs-12" id="main">
            <div id="stuff">stuff</div>
        </div>
                    </div>
                </li>
            </ul>

        </div>


    </div>
</div>

Upvotes: 0

Related Questions