CODEWITHSUNDEEP
javascriptjquerydrop-down-menuonmouseoveronmouseout
user3452721
user3452721

Reputation: 139

drop down menu on mouseout should remain visible

The button with dropdown menu should be visible when the mouse is moved inside the div which works fine but the problem is that when I move the mouse out of that div, I want the button and dropdown menu to remain visible if menu is dropped down but the button should get hidden if menu is not dropped down.How can I achieve this?(in the given code, button and dropdown menu get hidden on mouseout no matter what)

<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

Upvotes: 0

Views: 1607

Answers (3)

Sid M
Sid M

Reputation: 4354

Try this fiddle, hope this is what you are looking for.

You don't need onmouseout ="g()"

Update

try this updated fiddle

Upvotes: 0

Ryan Brewer
Ryan Brewer

Reputation: 180

If I am understanding you correctly you want something like this:

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"}
}

Here is a DEMO

Upvotes: 1

jhyap
jhyap

Reputation: 3837

Instead of set the style to display none, use the .show() and .hide() in jquery to show and hide the specific 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 to show div when mouse over

Upvotes: 1

Related Questions