子元素会触发父元素的鼠标移出事件

Question

<div class="container border-bottom position-relative">
    <div class="row">
      <div class="col-lg-5 topL-nav position-static">
        <ul class="nav navbar nav-justified mt-3 position-static nTitle">
          <li class="nTitle-item">
            <a href="javascript:;"><b>手机&平板</b></a>
            <div class="row maskNav position-absolute w-100 d-none" id="nList">
              <!-- 1-->
              <ul class="col-lg-2">
                <li><b><a href="#">推荐</a></b></li>
                <li><a href="#">Galaxy S10 | S10+</a></li>
                <li><a href="#">Galaxy Note9</a></li>
                <li><a href="#">Galaxy S9丨S9+</a></li>
                <li><a href="#">三星W2019</a></li>
                <li><a href="#">Galaxy Note8</a></li>
                <li><a href="#">Galaxy S8 | S8+</a></li>
                <li><a href="#">Galaxy A9s</a></li>
                <li><a href="#">Galaxy A8s</a></li>
                <li><a href="#">Samsung Galaxy Watch</a></li>
              </ul>
              <ul class="col-lg-2">
                <li><b><a href="#">手机&平板</a></b></li>
                <li><a href="#">智能手机</a></li>
                <li><a href="#">智能平板</a></li>
                <li><a href="#">智能穿戴设备</a></li>
                <li><a href="#">智能产品配件</a></li>
                <li><a href="#">官翻良品机</a></li>
                <li><a href="#">非全新机</a></li>
              </ul>
              <ul class="col-lg-2">
                <li><b><a href="#">应用</a></b></li>
                <li><a href="#">Bixby</a></li>
                <li><a href="#">Samsung Health 三星健康</a></li>
                <li><a href="#">Samsung Pay 三星智付</a></li>
                <li><a href="#">S 换机助手</a></li>
                <li><a href="#">查找我的手机</a></li>
                <li><a href="#">三星浏览器</a></li>
                <li><a href="#">三星应用商店</a></li>
                <li><a href="#">主题商店</a></li>
                <li><a href="#">三星畅联</a></li>
              </ul>
              <ul class="col-lg-2">
                <li><b><a href="#">授权体验店</a></b></li>
              </ul>
              <div class="col-lg-3 offset-1 maskNav-pic">
                <a href="javascript:;">
                  <b>Galaxy S10 +</b>
                  <span>了解更多</span>
                  <img src="./img/nav_pic1.jpg" alt=""/>
                </a>
              </div>
            </div>
          </li>
          <li class="nTitle"><a href="javascript:;"><b>电视&影音</b></a></li>
          <li class="nTitle"><a href="javascript:;"><b>生活家电</b></a></li>
          <li class="nTitle"><a href="javascript:;"><b>电脑/办公/存储</b></a></li>
          <li class="nTitle"><a href="javascript:;"><b>网上商城</b></a></li>
        </ul>
      </div>
      <div class="col-lg-2">
        <a href="#" class="logo"><span></span></a>
      </div>
      <div class="col-lg-5 topL-nav">
        <ul class="nav navbar nav-justified mt-3" style="margin-top: -1px">
          <li><a href="javascript;:"><b>最新活动</b></a></li>
          <li><a href="javascript;:"><b>售后服务</b></a></li>
          <li><a href="javascript;:"><b>商用解决方案</b></a></li>
          <li><a href="javascript;:"><b>盖乐世社区</b></a></li>
          <li><a href="javascript;:"><span class="search"></span></a></li>
        </ul>
      </div>
    </div>
  </div>

js

$('.nTitle').on('mouseover','li.nTitle-item',function(){
    $(this).children('div.row').removeClass('d-none');
  })
  $('.nTitle').on('mouseout','li.nTitle-item',function(){
    $(this).children('div.row').addClass('d-none');
  })

css

/*#topL-nav{*/
  /*float: left;}*/
.logo{
  display: inline-block;
  height: 4rem;

}
.logo span{
  display: inline-block;
  width: 124px;
  height: 21px;
  background-image: url(../img/svg-logo.svg);
  background-size: 100% auto;
  margin-top: 1.5rem;
}
.search{
  display: inline-block;
  margin-bottom: -4px;
  width: 20px;
  height: 20px;
  background-image: url(../img/ico-new-gnb-searh.svg);
  background-size: 100% auto;
}
.topL-nav a{
  position: relative;
}
.topL-nav>ul>li>a::after{
  position: absolute;
  display: block;
  content: "";
  margin: 0 auto;
  text-align: center;
  width: 0%;
  height: 4px;
  background: #162d9a;
  bottom: -1.5rem;
}

.topL-nav>ul>li>a:hover::after {
  width: 100%;
  transition: all 1s;
}
/*动画*/
.maskNav li{
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.maskNav-pic a,.maskNav-pic b,.maskNav-pic span{
  display: block;
  width: 100%;
}
.maskNav-pic a{
  height: 100%;
  position: relative;
}
.maskNav-pic b{
  position: absolute;
  text-align: center;
  font-size: 20px;
  height: 3rem;
  line-height: 3rem;
  top: 0.8rem;
}
.maskNav-pic span{
  position: absolute;
  width: 40%;
  margin-left: -20%;
  text-align: center;
  font-size: 12px;
  height: 1.5rem;
  line-height: 1.5rem;
  border: 1px solid #000;
  border-radius: 3rem;
  top: 3.6rem;
  left: 50%;
}
.maskNav-pic span:hover{
  color: #fff;
  background-color: #000;
  transition: all 1s;
}
#nList{
  top: 65px;
}

Answer 1

时间冒泡和事件捕获，可以去看下：https://www.cnblogs.com/megan...
子元素会触发父元素的鼠标移出事件，这个其实算符合用户体验的，没要阻止也有处理方法