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/

jQuery / CSS气泡鼠标悬停

1 个答案: