如何保持DIV可見出其與「的onmouseover」，並把鼠標在它

我試圖做一個菜單，這將擴大時，鼠標會在某個按鈕（如在附加的jsfiddle）如何保持DIV可見出其與「的onmouseover」，並把鼠標在它

後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/

男人你看起來應該是這樣，我用setTimeOut延遲關閉它3秒，但是如果我將鼠標移動到stuff div，我怎麼能保持它打開？我嘗試過使用onmouseover="document.getElementById('stuff').style.opacity = 1.0;，但在這種情況下，即使沒有先將鼠標放在hover div上，它也會出現。

來源

2017-02-08 Logi123

只需在您保存的超時時間內致電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>

來源

2017-02-08 20:07:23

謝謝，它的工作 – Logi123

還有一件事，我沒有注意到，我可以保持菜單打開時，鼠標停留在'懸停'？ – Logi123

是的 - 那麼你可以刪除所有超時的東西，只需切換0和1之間的不透明度，不是嗎？ –

您可以使用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); 
    }) 
});

CSS一樣

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>

來源

2017-02-08 20:01:51 muratkh

你必須移動懸停的DIV裏面你的東西DIV你要去表演，否則他們是完全兩個不同的部分和鼠標離開上#hover只是懸停的現在壽格設置他們是同一個div保持HTML和功能清潔 – muratkh

如果你能在子菜單移動到同級位置或嵌套位置就可以實現只用CSS同樣的效果。

CSS目標:hover允許您僅將CSS應用於懸停。如果您的子菜單位於要懸停的元素旁邊，則可以使用+將其選爲兄弟。要保持#stuff菜單處於打開狀態，只需確保對其應用相同的懸停規則。

例子：

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

來源

2017-02-08 20:09:36 Alejalapeno

您可以保存到超時功能的引用，然後使用clearTimout取消它。

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

然後

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

來源

2017-02-08 20:09:54

如何保持DIV可見出其與「的onmouseover」，並把鼠標在它

回答

相關問題