Перемещение элементов браузера нарушает функциональность наведения на боковой панели «Развернуть / Свернуть» - PullRequest
Новая
       16

Перемещение элементов браузера нарушает функциональность наведения на боковой панели «Развернуть / Свернуть»

2 голосов
/ 25 февраля 2020

У меня есть боковая панель, которая разворачивается / разворачивается при наведении. На этой боковой панели есть такие элементы, как input или select, для которых в браузере создано поле autocomplete или option. Проблема в том, что когда пользователь наводит курсор на эти поля, боковая панель сворачивается.

Как я могу предотвратить это? 

function toggleSidebar() {
  $(".sidebar").on("mouseover", function() {
    $(".toggle-animation").css({
      "width": "360px",
      "padding": "20px"
    });
    $(".filter-icon").css("opacity", "0");
  });

  $(".sidebar").on("mouseout", function() {
    $(".toggle-animation").css({
      "width": "60px",
      "padding": "0"
    });
    $(".filter-icon").css("opacity", "1");
  });
}
.sidebar {
  height: 100%;
  width: 60px;
  position: fixed;
  z-index: 1;
  top: 45;
  left: 0;
  overflow-x: hidden;
}

.sidebar form {
  opacity: 0;
}

.sidebar:hover form {
  opacity: 1;
  transition: all .1s;
  transition-delay: .1s;
}

.toggle-animation {
  width: 60px;
  transition: all .2s;
}

.filter-icon {
  width: 20px;
  position: absolute;
  top: 50%;
  left: 20px;
  opacity: 1;
  transition: all .2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside class="sidebar toggle-animation">
  <th:block id="filter"></th:block>
  <img class="filter-icon" src="/static/images/filter.svg" />
</aside>

1 Ответ

0 голосов
/ 26 февраля 2020

Что вы можете сделать, это заменить события :

Вместо mouseover использовать mouseenter и вместо mouseout use mouseleave

Проверьте тест, который я сделал ниже: когда вы используете mouseover и mouseout, это вызовет упомянутую вами проблему, но при изменении событий для mouseenter и mouseleave, работает нормально: 

$(".sidebar").on("mouseenter", function() {
            $(".toggle-animation").css({
              "width": "360px",
              "padding": "20px"
            });
    
        $(".filter-icon").css("opacity", "0");
//insert dynamically some elements to simulate your situation
         $(".sidebar").append("<div id='dynamicElements'><input placeholder='Input Field' '><br><select id='selectField'><option>1</option><option>2</option><option>3</option><option>4</option></div>");
      });
    
      $(".sidebar").on("mouseleave", function() {
      
      
      
        $(".toggle-animation").css({
          "width": "60px",
          "padding": "0"
        });
        $(".filter-icon").css("opacity", "1");
//remove the dynamically generated elements
         $("#dynamicElements").remove();
          });
    .sidebar {
      height: 100%;
      width: 60px;
      position: fixed;
      z-index: 1;
      top: 45;
      left: 0;
      overflow-x: hidden;
background-color: red;
    }

    .sidebar form {
      opacity: 0;
    }

    .sidebar:hover form {
      opacity: 1;
      transition: all .1s;
      transition-delay: .1s;
    }

    .toggle-animation {
      width: 60px;
      transition: all .2s;
    }

    .filter-icon {
      width: 20px;
      position: absolute;
      top: 50%;
      left: 20px;
      opacity: 1;
      transition: all .2s;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <aside class="sidebar toggle-animation">
          <th:block id="filter"></th:block>
          <img class="filter-icon" src="/static/images/filter.svg" /><br>

        </aside>
...