jQuery / CSS氣泡鼠標懸停

Question

我創建了一個CSS“氣泡”，用作flexbox的子菜單。

本質上，我想弄清楚的是，是否有一種方法可以將“ mouseover”區域擴展到氣泡之前的:: before部分？

我想擁有它，以便當我將鼠標懸停在打開子菜單的圖標上時，我可以將鼠標懸停在氣泡和打開菜單的位置之間的空間上。 這意味着我不想將鼠標懸停在菜單項上，以使其打開子菜單，然后僅當我在菜單的:: before部分上滾動時才能進入該子菜單。 如果我打開子菜單並在打開的氣泡和flexbox之間的空間中滾動（我想您可以稱其為padding或它們之間的間隔），我希望該子菜單保持打開狀態，否則，如果我將鼠標懸停在子菜單之外（使用:: before創建的間距除外），我想關閉子菜單。 我想允許它是子菜單上小指針與子菜單本身之間的間距，這是鼠標懸停的一部分。

 $('.submenu').css('display', 'none'); $("div[class*='menuHover']").mouseover(function(i){ submenu = $(this).next() $(submenu).fadeIn(500, function(e){ $(this).show(); }) }); $('.menuWrapper').mouseleave(function(){ $('.submenu').hide(); }); 

 .flex-container { display: flex; flex-wrap: wrap; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 250px; height:200px; margin: 10px; text-align: center; } .icon { font-size:80pt; vertical-align:50%; } .icon-wrapper{ position:relative; top:45px } .menuHover > div i { font-size:10pt; } .menuHover{ position:relative; top:-160px; left:200px; } .menuWrapper { height:100px; width:70px; cursor:default; } .submenu { cursor:default; width:200px; height:150px; position:relative; top:-190px; left:255px; background: #686868; border-radius: 10px; box-shadow: 0 0 6px #B2B2B2; display: inline-block; padding: 10px 22px; vertical-align:top; z-index: 15; } .submenu::before{ background-color:#686868; content: "\\00a0"; display:block; height:16px; position:absolute; top: 10px; left: -5px; transform: rotate(29deg) skew(-35deg); -moz-transform:rotate(29deg) skew(-35deg); -ms-transform: rotate(29deg) skew(-35deg); -o-transform: rotate(29deg) skew(-35deg); -webkit-transform: rotate(29deg) skew(-35deg); width: 15px; } div.info-link{ padding-left:100px; display:inline-block; white-space:nowrap font-size:12pt; } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> </br></br></br> <div class="flex-container"> <div> <div class="icon-wrapper"><i class="fas fa-user icon"></i></div> <div class="icon-wrapper">My Products</div> <div class="menuWrapper"> <div class="menuHover"><i class="fa fa-bars"></i></div> <div class="submenu"> Sub-menu 1</br> Sub-menu 2</br> Sub-menu 3</br> Sub-menu 4</br> Sub-menu 5</br> <div class="info-link"><a href="#">Go to page</a></div> </div> </div> </div> <div> <div class="icon-wrapper"><i class="fas fa-users icon"></i></div> <div class="icon-wrapper">My Teams's Products</div> <div class="menuWrapper"> <div class="menuHover"><i class="fa fa-bars"></i></div> <div class="submenu"> Sub-menu 1</br> Sub-menu 2</br> Sub-menu 3</br> Sub-menu 4</br> Sub-menu 5</br> <div class="info-link"><a href="#">Go to page</a></div> </div> </div> </div> <div> <div class="icon-wrapper"><i class="fas fa-search icon"></i></div> <div class="icon-wrapper">Search</div> <div class="menuWrapper"> <div class="menuHover"><i class="fas fa-bars"></i></div> <div class="submenu"> Sub-menu 1</br> Sub-menu 2</br> Sub-menu 3</br> Sub-menu 4</br> Sub-menu 5</br> <div class="info-link"><a href="#">Go to page</a></div> </div> </div> </div> <div> <div class="icon-wrapper"><i class="fas fa-chart-bar icon"></i></div> <div class="icon-wrapper">Stats</div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 

Answer 1

只需使用另一個具有位置/大小的偽元素（ :after ）來填充所需的間隙即可。

例如，給定現有標記，您可以添加：

.submenu:after {
  display: block;
  position: absolute;
  content: '';
  left: -20px;
  top: 15px;
  width: 22px;
  height: 100px;
  background: transparent;
}

在這里修改/更新了小提琴： https ： //jsfiddle.net/sk23uc0p/