Jquery dropdown doesn't hide when you hover out

by

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>

90 thoughts on “Jquery dropdown doesn't hide when you hover out”

  70. Howdy! I understand this is somewhat off-topic but I had to ask.
    Does running a well-established blog such as yours require a massive
    amount work? I’m brand new to blogging but I do write in my
    journal on a daily basis. I’d like to start a blog so I can share my
    experience and feelings online. Please let me know if you have any kind of ideas or tips for
    new aspiring bloggers. Thankyou! http://harmonyhomesltd.com/Ivermectinum-overdose.html

    Reply