Question

我有动态构造的菜单，要在菜单标题上悬停时要隐藏和显示。当用户未将鼠标悬停在标题或菜单上方时，菜单应关闭（动画高度设置为0）。

我不确定如何检查用户将鼠标悬停在A或B上。

当我可以使用.hover（）时，此代码有效，但不适用于动态创建的元素，因此现在我尝试使用.on（）。

这是我的尝试：

var mychapterMenuTimer = false;

        $(document).on("mouseenter", "#chapterName, .chapterMenuContainer", (function() {
            //mouse enter
            clearTimeout(mychapterMenuTimer);
        }), function() {
            //mouse leav
            mychapterMenuTimer = setTimeout(function() {
                $('#chapterMenu').animate({
                    height: '0'
                }, 444);
            }, 100)
        });

#chapterMenu {  
    width: 70%;
    position: absolute;
    top: 40px;
    
    height: 0px;
    overflow: hidden;
 
    
}

<-- dynamically created earlier -->

<p class="chapterName">

<div id="chapterMenu" class="menuHover">
  <div class="row chapterMenuContainer">
    <div class="col-6 chapterList1"></div>
    <div class="col-6 chapterList2"></div>
  </div>
</div>

Answer 1

假设您的类和ID也不会动态更改，则可以使用:hover选择器和CSS过渡来实现动画效果，并在CSS文件中实现所有这些功能，而不必费神费力地围绕javascript逻辑。

请参见以下示例；

#chapterMenu {  
        width: 200px;
        position: absolute;
        top: 80px;
        height: 0px;
        background-color:#ddd;
        overflow: hidden;
            
        /*animate height*/

        transition: height 0.25s;
        -webkit-transition: height 0.25s;
    }
        
    .chapter { 
        display: inline-block;
        padding:10px 20px;
    }
    .chapter:hover #chapterMenu {
        /*on chapter name hover set chapterMenu height */
        height:100px;

    }

  <div class="chapter">
            <p>Chapter 1</p>

    <div id="chapterMenu" class="menuHover">
      <div class="row chapterMenuContainer">
        <div class="col-6 chapterList1"><a href="#">chapter1 list item 1</a></div>
        <div class="col-6 chapterList2"><a href="#">chapter1 list item 2</a></div>
      </div>
    </div>
            </div>
        <div class="chapter">
            <p>Chapter 2</p>

    <div id="chapterMenu" class="menuHover">
      <div class="row chapterMenuContainer">
        <div class="col-6 chapterList1"><a href="#">chapter2 list item 1</a></div>
          <div class="col-6 chapterList2"><a href="#">chapter2 list item 2</a></div>
      </div>
    </div>
            </div>

CSS动画的唯一缺点是对旧版浏览器的支持有限。

如果未悬停在元素A或元素B上

1 个答案: