如何实现鼠标悬停.header_kosar_link及移入.cart_hover时保持该div显示？

你的问题在于当前代码只监听了.header_kosar_link的鼠标进出事件——当鼠标从链接移到.cart_hover时，会触发链接的mouseout，直接隐藏悬浮层，而此时鼠标还没来得及触发悬浮层的事件，导致悬浮层消失。下面给你两种常用的解决方案：

方案1：使用父容器统一监听（推荐） #

把链接和悬浮层放在同一个父容器里，监听父容器的mouseenter和mouseleave事件，这样只要鼠标在父容器范围内，悬浮层就会保持显示。

修改后的HTML结构 #

<div class="cart-container">
  <div class="col-md-2 d-flex justify-content-center justify-content-md-end align-items-center header_div">
    <a href="https://projektar.hu/kosar" title="Kosár" class="header_kosar_link d-flex align-items-center">
      <i class="fa fa-shopping-basket fejlec_kosar_ikon" aria-hidden="true"></i>
      <span id="header_kosar_text" class="header_kosar_text">Cart</span>
    </a>
  </div>
  <div class="clearfix"></div>
  <div class="cart_hover">Cart Hover</div>
</div>

对应的jQuery代码 #

$('.cart-container').on('mouseenter', function() {
  $('.cart_hover').show(); // 等价于.css('display', 'block')，更简洁
}).on('mouseleave', function() {
  $('.cart_hover').hide(); // 等价于.css('display', 'none')
});

这个方案逻辑最清晰，也最不容易出问题，因为父容器的鼠标事件会覆盖内部所有元素的范围。

方案2：延迟隐藏+双元素监听（无需修改HTML结构） #

如果不想调整HTML结构，可以给隐藏操作加一个短暂延迟，同时监听悬浮层的鼠标进出事件，当鼠标移到悬浮层时清除延迟，避免悬浮层被意外隐藏。

修改后的jQuery代码 #

let hoverTimeout; // 用来存储延迟定时器的ID

// 当鼠标进入链接或悬浮层时，显示悬浮层并清除延迟
$('.header_kosar_link, .cart_hover').on('mouseenter', function() {
  clearTimeout(hoverTimeout);
  $('.cart_hover').show();
});

// 当鼠标离开链接或悬浮层时，启动延迟隐藏
$('.header_kosar_link, .cart_hover').on('mouseleave', function() {
  hoverTimeout = setTimeout(function() {
    $('.cart_hover').hide();
  }, 200); // 200毫秒的延迟，足够鼠标从链接移到悬浮层
});

这个方案的核心是利用延迟给鼠标移动留缓冲时间，确保鼠标从链接移到悬浮层时，悬浮层不会被立刻隐藏。

另外，建议你把CSS里的display:none改成用jQuery的show()/hide()来控制，这样代码更简洁易读，而且jQuery会自动处理元素的初始状态。

内容的提问来源于stack exchange，提问作者Tibi458