Question

我有一个子菜单div，其中有一个购物车span。当用户将鼠标悬停在它上面时，它会显示我的隐藏购物车DIV。然后，用户可以将鼠标移到DIV上以删除项目。

如果用户显示鼠标并将其移动到隐藏的DIV中，然后再将鼠标移出隐藏的DIV

我遇到的问题是，如果用户显示DIV而不是进入隐藏的DIV，而是返回到子菜单/主菜单，则DIV不会重新显示。 -隐藏，我已经尽力了。

请检查我的fiddle

如果您不先去div，它就不会隐藏

$('#subMenuCartBox').mouseover(function () {
  $('#cartBox').show();
  $('#cartBox').mouseleave(function () {
    $('#cartBox').hide();
  });
}).mouseleave(function () {
  setTimeout(function () {
    if (!$('#cartBox').length) {
      $('#cartBox').hide();
    }
  });
})

.mainMenu {
  width: 100%;
  height: 75px;
  background-color: lightblue;
}

.subMenu {
  width: 100%;
  height: 45px;
  background-color: gray;
  text-align: right;
  padding: 10px;
}

.subMenuOptionSpan {
    display: inline-flex;
}

.subMenuCartBox {
    background-color: deepskyblue;
    padding: 5px;
    width: 100%;
    cursor: pointer;
}

.cartBox {
    float: right;
    padding: 15px;
    background-color: lightgray;
    display: none;
    left: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainMenu">
  Main menu options
</div>

<div class="subMenu">
  <div class="row justify-content-end align-items-center">
    <span class="subMenuOptionSpan col-12 col-sm-auto">
      <i class="fas fa-user fa-lg"></i>
      <div id="username">Test of long username</div>
    </span>
    <span id="subMenuCartBox" class="subMenuOptionSpan col-12 col-sm-auto">
      <i class="fas fa-shopping-cart fa-lg"></i>
      <div id="cartAmountBox" class="subMenuCartBox">
        <span id="cartAmountText" class="subMenuCartAmount">0 item(s) - £0.00</span>
      </div>
    </span>
  </div>
</div>

<div id="cartBox" class="cartBox">
  <b id="emptyCart">There are currently no items in your cart.</b>
</div>

如果用户进入页面上的任何地方而不必先进入页面内然后离开页面，则我需要隐藏的DIV重新隐藏。

Answer 1

$('#subMenuCartBox').mouseover(function () {
  $('#cartBox').show();

}).mouseleave(function () {

      $('#cartBox').hide();
 
})

.mainMenu {
  width: 100%;
  height: 75px;
  background-color: lightblue;
}

.subMenu {
  width: 100%;
  height: 45px;
  background-color: gray;
  text-align: right;
  padding: 10px;
}

.subMenuOptionSpan {
    display: inline-flex;
}

.subMenuCartBox {
    background-color: deepskyblue;
    padding: 5px;
    width: 100%;
    cursor: pointer;
}

.cartBox {
    float: right;
    padding: 15px;
    background-color: lightgray;
    display: none;
    left: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainMenu">
  Main menu options
</div>

<div class="subMenu">
  <div class="row justify-content-end align-items-center">
    <span class="subMenuOptionSpan col-12 col-sm-auto">
      <i class="fas fa-user fa-lg"></i>
      <div id="username">Test of long username</div>
    </span>
    <span id="subMenuCartBox" class="subMenuOptionSpan col-12 col-sm-auto">
      <i class="fas fa-shopping-cart fa-lg"></i>
      <div id="cartAmountBox" class="subMenuCartBox">
        <span id="cartAmountText" class="subMenuCartAmount">0 item(s) - £0.00</span>
      </div>
    </span>
  </div>
</div>

<div id="cartBox" class="cartBox">
  <b id="emptyCart">There are currently no items in your cart.</b>
</div>

您是要存档吗？请澄清您的问题。

Answer 2

使用Jquery，您可以检查鼠标离开按钮的哪一侧，并在将按钮留在底部时使div保持打开状态。

cax = ax.scatter(...)
cax.cmap.set_over('y') # assigns yellow to any entry >1
cax.set_clim(0, 1)     # fixes the range of 'normal' colors to (0, 1)

jQuery的显示/隐藏DIV无法正常工作

2 个答案: