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/

菜单看起来应该是这样，我用setTimeOut延迟关闭它3秒钟，但是如果我将鼠标移动到stuff div，我怎么能保持打开？我尝试使用onmouseover="document.getElementById('stuff').style.opacity = 1.0;，但在这种情况下，即使没有先将鼠标放在hover div上，它也会出现。

Answer 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>

Answer 2

只需在您保存的超时时调用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 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)">

如何使用＆＃34; onmouseover＆＃34;把鼠标放在上面

4 个答案: