Jquery dropdown doesn’t hide when you hover out

so to understand my problem you can see THIS GIF dropdown works when i hover out at the bottom of the box or go to another dropdown but it’s stays when you hover out at the top or the right side of the div it’s litteraly an edge case. Here is my code JSFIDDLE or there is a snippet here.

Thanks for your help

$("[class^='iconWrapper']").mouseover(function(e) {
  $("[class^='helpBox']").hide();
  $(this).next("[class^='helpBox']").show();
});

$("[class^='helpBox']").mouseleave(function() {
  $("[class^='helpBox']").hide();
});

.grid-container-PC {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 0.5fr;
    gap: 0px 0px;
    grid-template-areas: "topBar topBar topBar topBar topBar topBar" "navBar navBar navBar navBar navBar navBar";
    padding: 0;
    margin: 0;
}

.topBar {
    grid-area: topBar;
    width: 100%;
    height: 4vh;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

.navBar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 0.65fr;
    gap: 0px 0px;
    grid-template-areas: ". mainBar mainBar mainBar mainBar ." "bottomBar bottomBar bottomBar bottomBar bottomBar bottomBar";
    grid-area: navBar;
}

.mainBar {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 1fr;
    gap: 0px 0px;
    grid-template-areas: ". . . ." "logoBox searchBar searchBar cart";
    grid-area: mainBar;
}

.searchBar {
    grid-area: searchBar;
    width: 100%;
    height: 5vh;
}

.cart {
    grid-area: cart;
}

.logoBox {
    grid-area: logoBox;
    width: 100%;
    height: 100%;
}

.bottomBar {
    width: 100%;
    height: 100%;
    grid-area: bottomBar;
    background: rgb(245, 245, 245);
    box-shadow: rgba(0, 0, 0, 0.64) 0px 2px 8px -5px;
}

.grid-container-mobile {
    display: none
}

.cartWrapper {
    display: flex;
    position: relative;
    -webkit-box-align: center;
    align-items: center;
    width: 90%;
    margin-left: 5%;
}

.iconWrapper1,
.iconWrapper2,
.iconWrapper3 {
    display: flex;
    width: 33.33%;
}

.iconContent1,
.iconContent2,
.iconContent3 {
    height: 56px;
    min-width: 100%;
    display: flex;
    align-items: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}

.tileLink {
    -webkit-box-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    width: 100%;
    height: 100%;
    color: black;
}

.iconPic {
    font-size: 28px;
    width: 32px;
    height: 32px;
}

.tileLink:hover {
    color: black;
    text-decoration: none;
}

.iconText {
    font-size: 11px;
    line-height: 30px;
    white-space: nowrap;
    text-align: center;
    padding: 0 7px 0 7px;
}

.iconContent1:hover,
.iconContent2:hover,
.iconContent3:hover {
    border-top: none;
    border-radius: 8px 8px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 2px 1px, rgba(0, 0, 0, 0.16) 0px 4px 8px 0px;
    background: rgb(255, 255, 255);
    z-index: 11;
    -webkit-box-shadow: 10px 0px 6px -3px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 10px 0px 6px -3px rgba(0, 0, 0, 0.16);
    box-shadow: 5px 0px 6px -3px rgba(0, 0, 0, 0.16);
}

.helpBox1,
.helpBox2,
.helpBox3 {
    display: none;
    z-index: 10;
    position: absolute;
    top: 100%;
    min-width: 200px;
    background-color: rgb(255, 255, 255);
    border-radius: 0px 8px 8px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 2px 1px, rgba(0, 0, 0, 0.16) 0px 4px 8px 0px;
    padding: 8px 0px 15px;
    left: 0px;
}

.helpBox2 {
    left: 33.33%;
    min-width: 250px;
}

.helpBox3 {
    right: 0%;
    min-width: 250px;
}

.tileListHelpTitle {
    padding: 0px 16px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: rgb(112, 112, 112);
    font-size: 15px;
}

.listHelpBox {
    list-style-type: none;
    padding: 0;
    margin-bottom: 0rem;
}

.listStyleHelpBox {
    list-style-type: none;
    box-sizing: inherit;
    padding: 0px;
    margin: 0px;
    height: 3.4vh;
    width: 100%;
    font-size: 14px;
}

.linkHelpBox {
    padding: 0px 16px;
    width: 100%;
    height: 100%;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
}

a.linkHelpBox {
    color: rgb(112, 112, 112);
}

a:hover.linkHelpBox {
    color: rgb(112, 112, 112);
    text-decoration: none;
}

.listStyleHelpBox:hover {
    background-color: rgb(245, 245, 245);
}

.dayBoxHelp,
.hourBoxHelp {
    font-family: 'Montserrat', sans-serif;
    color: rgb(112, 112, 112);
    font-size: 10px;
}

.loginButtonHelpBox .linkLoginHelpBox,
.loginButtonHelpBox .linkCreateHelpBox {
    background: rgb(0, 130, 250);
    color: rgb(255, 255, 255);
    border: 1px solid rgb(0, 130, 250);
    border-radius: 20px;
    min-width: 100%;
    text-align: center;
    padding: 3px 0 3px 0;
}

.loginButtonHelpBox .linkCreateHelpBox {
    color: rgb(0, 130, 250);
    border: 1px solid rgb(0, 130, 250);
    background: rgb(255, 255, 255);
}

.hrLogin {
    margin: 22px 0px 21px;
    border-top: 1px solid rgb(221, 221, 221);
    position: relative;
}

.textHrLogin {
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: rgb(112, 112, 112);
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0px 16px;
    width: 130px;
}

.categoryPC {
    width: 100%;
    height: 100%;
    padding: 9px 0 9px;
}

.categoryPCLink {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="grid-container-PC">
    <div class="topBar">
      <div class="topBarWrapper">
        <div class="container-fluid"></div>
      </div>
    </div>

    <div class="navBar">
      <div class="mainBar">
        <div class="searchBar"></div>

        <div class="cart">
          <div class="cartWrapper">
            <div class="iconWrapper1">
              <div class="iconContent1">
                <a class="tileLink" href=""></a>

                <div class="iconPic"></div>

                <div class="iconText">
                  test1
                </div>
              </div>
            </div>

            <div class="helpBox1"></div>

            <div class="iconWrapper2">
              <div class="iconContent2">
                <a class="tileLink" href="{%%20url%20'order'%20%}"></a>

                <div class="iconPic"></div>

                <div class="iconText">
                  test2
                </div>
              </div>
            </div>

            <div class="helpBox2">
              <div class="tileListHelpTitle">
                Test value
              </div>

              <div class="loginButtonHelpBox">
                <div class="helloMsgLogin">
                  Test valuej
                </div><a href=""></a>

                <div class="linkLoginHelpBox"></div>
                <hr class="hrLogin" />

                <p class="textHrLogin">Test value</p>

                <div class="linkCreateHelpBox"></div>
              </div>

              <ul class="listHelpBox">
                <li class="listStyleHelpBox"><a class="linkHelpBox">Test Value</a></li>
              </ul>
            </div>

            <div class="iconWrapper3">
              <div class="iconContent3">
                <a class="tileLink" href=""></a>

                <div class="iconPic"></div>

                <div class="iconText">
                  test3
                </div>
              </div>
            </div>

            <div class="helpBox3">
              <div class="tileListHelpTitle">
                text
              </div>
            </div>
          </div>
        </div>

        <div class="logoBox">
          <div class="logoWrapper"></div>
        </div>
      </div>
    </div>
  </div>

Answer

You need to wrap mouseleave function to iconWrapper class

and also need to assign mouseleave to helpBox cause you don’t wanna close helpbox window on moving out of heading

      $("[class^='iconWrapper']").mouseover(function(e) {
  $("[class^='helpBox']").hide();
  $(this).next("[class^='helpBox']").show();
});

$("[class^='iconWrapper']").mouseleave(function() {
  let ele=$(this).next("[class^='helpBox']");  
  $(ele).mouseover(function(){
    $(this).show();
  });
  $(ele).mouseleave(function(){
    $(this).hide();
  });
  $(ele).hide();
});

Advertisement

Answer