鼠標懸停時的下拉菜單應保持可見

Question

當鼠標在div內移動時，帶有下拉菜單的按鈕應該可見，這很好，但問題是當我將鼠標移出該div時，如果菜單被下拉，我希望按鈕和下拉菜單保持可見，但是如果菜單沒有被下拉，按鈕應該被隱藏。我該如何實現？（在給定的代碼中，無論如何鼠標和按鈕都被隱藏）

<div id="img_container" name="img_container" onmouseover="f()" onmouseout ="g()">
            <img src="image/images.jpg"  alt="Cover" >
            <div class="btn-group" id="cov" name="cov" >
               <button  class="btn dropdown-toggle" data-toggle="dropdown">Action
               </button>
               <ul class="dropdown-menu">
    <!-- dropdown menu links -->
                <li><a href="#">Secondary link</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Another link</a></li>
               </ul>
            </div>
        </div>


function f(){
      document.getElementById("cov").style.display="inline-block";
  }

  function g(){
      document.getElementById("cov").style.display="none";
  }

Fiddle

Answer 1

取而代之的設置style ，以顯示none ，使用.show()和.hide()在jquery顯示和隱藏特定div

$('#cov').hide();

function f() {
    //document.getElementById("cov").style.display = "inline-block";
    $('#cov').show();
}

function g() {
    // $('#cov').hide();
   //document.getElementById("cov").style.display = "none";
}

JSFiddle在鼠標懸停時顯示div

Answer 2

如果我正確地理解了您的要求，那么您將需要以下內容：

var list = document.getElementById("dropdown-menu");
var menu = document.getElementById("cov");

function dropdown() {
    if (list.style.display == "none") {
        list.style.display = "block";
    } else {
        list.style.display = "none";
    }
}

function f() {
    menu.style.display = "block";
}

function g() {
    if (list.style.display == "none") {
        menu.style.display = "none";
    } else if (list.style.display == "block"){
        menu.style.display = "block";
    } else {menu.style.display = "block"}
}

這是一個演示

Answer 3

試試這個小提琴 ，希望這是您想要的。

您不需要onmouseout ="g()"

更新資料

試試這個更新的小提琴