Hovering browser elements breaks hover functionality on expand/collapse sidebar

user_10695202 0
Viewed 388

I have a sidebar that expands/collapses on hover. In this sidebar there are elements such as input or select that have a browser generated autocomplete field or option field. The problem is whenever the user hovers these fields the sidebar collapses.

How can I prevent this from happening?

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>

sidebar css html jquery javascript
1 Answers

What you can do is to replace the events:

Instead of mouseover use mouseenter and instead of mouseout use mouseleave

Check the test I made below: when you use mouseover and mouseout, it will generate the problem you mentioned but when you change the events for mouseenter and mouseleave, it works fine:

$(".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>

user_18911400
Related