При наведении курсора мыши не на элемент A или элемент B

#jquery #html #css

#jquery #HTML #css

Вопрос:

У меня есть динамически созданное меню, которое я хочу скрыть и показать при наведении курсора мыши на заголовок меню. Когда пользователь не наводит курсор мыши на заголовок Или само меню, меню должно закрыться (анимировать высоту до 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>

Ответ №1:

Предполагая, что ваши классы и идентификаторы также не изменяются динамически, вы можете добиться всего этого в своем CSS-файле, используя :hover селектор и 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-анимации является ограниченная поддержка старых браузеров.

1. Привет! Спасибо за вашу помощь! В вашем примере меню закрывается, когда вы пытаетесь что-то выбрать из него. Я бы хотел, чтобы он оставался открытым в обеих этих ситуациях: 1. Пользователь наводит курсор мыши на заголовок «Название главы» ИЛИ 2. Пользователь наводит курсор на само меню

2. Ах, я вижу, я немного отредактировал разметку, чтобы название главы стало разделом контейнера для меню. Устраняет эту проблему. C: