Gナビのjavascript

javascript初心者です。

複数タグどちらに対してもmouseleaveされた場合クラスを外したいのですがうまくいきません。

実装したいのは参考サイトようなサブメニューが開いた時に背景が暗くなるような動きです。
▼参考サイト
https://www.incudata.co.jp/

現状の実装だと、submenuにmouseenterされていてもクラスが外れてしまいます。
mouseleaveの対象が複数ある場合どのように記述すればいいのでしょうか？

初歩的な質問で申し訳ございません。
どなたかご指摘いただけると幸いです。

html
1<header>
2<nav id="global-nav">
3  <ul class="innerBox01">
4    <li class="outline">
5      <a href="#" class="menu">会社案内</a>
6      <ul>
7        <li>会社案内</li>
8        <li><a href="#">サブメニュー</a></li>
9        <li><a href="#">サブメニュー</a></li>
10      </ul>
11    </li>
12    <li>
13      <a href="#">設備紹介</a>
14    </li>
15    <li class="outline">
16      <a href="#" class="menu">業務案内</a>
17      <ul>
18        <li>menu3</li>
19        <li><a href="#">サブメニュー</a></li>
20        <li><a href="#">サブメニュー</a></li>
21        <li><a href="#">サブメニュー</a></li>
22        <li><a href="#">サブメニュー</a></li>
23      </ul>
24    </li>
25  </ul>
26</nav>
27</header>

jquery
1submenu = $('#global-nav ul li.outline ul');
2nav = $('#global-nav ul li.outline a.menu');
3
4
5
6nav.on('mouseenter', function(e){
7  document.getElementsByTagName('body')[0].setAttribute("class","setBg");
8});
9
10submenu.on('mouseenter', function(e){
11  document.getElementsByTagName('body')[0].setAttribute("class","setBg");
12});
13
14if($(nav,submenu).on('mouseleave')){
15    document.getElementsByTagName('body')[0].removeAttribute("class","setBg");
16};

css
1
2
3/*Gナビ*/
4
5body {
6    position: relative;
7    transition: 5s;
8}
9
10.body:before {
11    position: absolute;
12    content: "";
13    width: 100%;
14    height: 100%;
15    background: none;
16    transition: 5s;
17}
18
19.setBg:before {
20    position: absolute;
21    content: "";
22    width: 100%;
23    height: 100%;
24    background: #00000083;
25    transition: 5s;
26}
27
28#global-nav ul {
29    margin: 0px auto 0;
30    text-align: center;
31}
32
33#global-nav ul li {
34    display: inline-block;
35    margin-right: 5vw;
36    margin-top: 10px;
37}
38
39#global-nav ul li:last-child {
40    margin-right: 0vw;
41}
42
43#global-nav ul li a {
44    font-size: 14px;
45    display: block;
46}
47
48#global-nav ul li.outline a {
49    cursor: default;
50    position: relative;
51    padding-bottom: 27px;
52}
53
54#global-nav ul li.outline>a:before {
55    content: "";
56    position: absolute;
57    width: 0px;
58    height: 0px;
59    margin: auto;
60    bottom: 13px;
61    left: 0;
62    right: 0;
63    border-left: 5px solid transparent;
64    border-right: 6px solid transparent;
65    border-top: 7px solid black;
66}
67
68#global-nav ul li.outline ul {
69    position: fixed;
70    left: 0;
71    margin: 0;
72    width: 100%;
73    height: 144px;
74    opacity: 0;
75    top: 123px;
76    visibility: hidden;
77    transition: 0.2s;
78    background-color: #fff;
79}
80
81#global-nav ul li.outline ul li {
82    width: 15%;
83    position: relative;
84    color: #000;
85    vertical-align: top;
86}
87
88#global-nav ul li.outline ul li a {
89    margin: 0 auto;
90    text-align: center;
91    background: #FFF;
92    font-weight: normal;
93    padding: 5vh 0 0;
94    height: 30px;
95    text-align: center;
96    letter-spacing: 0;
97    cursor: pointer;
98    color: #CCC;
99    border-radius: 5px;
100    border: none;
101    margin-top: 1vh;
102}
103
104#global-nav ul li.outline:hover ul {
105    visibility: visible;
106    opacity: 1;
107    z-index: 900;
108}
109
110#global-nav ul li.outline:hover ul li {
111    overflow: visible;
112    opacity: 1;
113}
114
115#global-nav ul li.outline:hover ul li a {
116    opacity: 1;
117}