將鼠標移動到另一個盒子後可見，然後保持可見框

Question

我正在做一個下拉列表，但更多的是一個按鈕，我需要能夠看起來不錯。我幾乎得到了我需要的所有東西，但是當我將鼠標移動到出現的盒子上（下拉列表）時，它消失了。這是我到目前爲止;

HTML

<div id="buttons"> 
    <div id="box"></div> 
    <div id="content">content here</div> 
    <div id="box1"></div> 
    <div id="content1">content here</div> 
    <div id="box2"></div> 
    <div id="content2">content here</div> 
</div> 

CSS

#box { 
    position: absolute; 
    width: 10vw; 
    height: 10vw; 
    background-color: blue; 
} 

#content { 
    position: absolute; 
    left: 11vw; 
    width: 10vw; 
    height: 10vw; 
    background-color: red; 
    display: none; 
} 

jQuery的

$("#box").hover(
    function() { 
    $("#content").slideDown(); //.show(); 
    }, 
    function() { 
    $("#content").fadeOut(); //hide(); 
    } 
); 

$("#content").hover(
    function() { 
    $("#content").show(); //.show(); 
    }, 
    function() { 
    $("#content").fadeOut(); //hide(); 
    } 
); 

任何事情我做錯了，更好的方法來做到這一點或鏈接到已經回答這個問題的現有問題將非常感激。謝謝！

Answer 1

這裏是你想要的到底是什麼。

$("#box, #content").on("mouseenter", function() { 
    $("#content").slideDown(); //.show(); 
}) 
.on("mouseleave", function() { 
    if (!$("#content").is(":hover")) 
    $("#content").fadeOut(); //hide(); 
}); 

https://jsfiddle.net/kvbvLy4d/

Answer 2

您還可以通過使用CSS爲內容製作動畫height而無需任何Javascript/JQuery來實現此目的。

#box { 
 
    position: absolute; 
 
    width: 10vw; 
 
    height: 10vw; 
 
    background-color: blue; 
 
} 
 

 
#box:hover + #content, #content:hover { 
 
    height: 10vw; 
 
} 
 

 
#content { 
 
    position: absolute; 
 
    left: 11vw; 
 
    width: 10vw; 
 
    height: 0; 
 
    background-color: red; 
 
    -webkit-transition: height 0.5s; 
 
    transition: height 0.5s; 
 
    overflow: hidden; 
 
}

<div id="buttons"> 
 
    <div id="box"></div> 
 
    <div id="content">content</div> 
 
    <div id="box1"></div> 
 
    <div id="content1">content</div> 
 
    <div id="box2"></div> 
 
    <div id="content2">content</div> 
 
</div>