Как сохранить ДИВ видны после показа его «OnMouseOver» и поставив курсор мыши над ней

Question

Я пытаюсь сделать меню, которое будет расширяться, когда мышь будет над кнопкой (как в прилагаемом 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/

мужчины u появляется так, как должно, и я задерживаю его закрытие в течение 3 секунд с помощью setTimeOut, но как я могу держать его открытым, если я перемещаю мышь в div stuff? Я пытался использовать onmouseover="document.getElementById('stuff').style.opacity = 1.0;, но в этом случае он появляется даже без наложения мыши на hover div первым.

Answer 1

Просто нужно позвонить clearTimeout по тайм-ауту, который вы экономите. Нет необходимости в 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>

Answer 2

Вы можете добиться этого с помощью Jquery .mouseenter или .mouseover и .mouseleave функция здесь код я уже испытал это на codepen http://codepen.io/muratkh/pen/dNqxXM

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

КСС же

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> 

Answer 3

Если вы можете переместить подменю в положение родственного или вложенном положении вы можете достичь того же эффекта с помощью только CSS.

Цель CSS :hover позволяет применять CSS только при наведении курсора. Если ваше подменю находится рядом с элементом, который вы наводите, вы можете использовать +, чтобы выбрать его как родного брата. Чтобы открыть меню #stuff, вам просто нужно убедиться, что вы примените к нему одно и то же правило наведения.

Пример:

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

Answer 4

Вы можете сохранить ссылку на функцию тайм-аута, а затем использовать clearTimout, чтобы отменить его.

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

затем

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