Как разрешить: наведите указатель мыши, пока мышь перемещается через зазор?

Question

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    cursor: default; 
 
} 
 

 
.btnlist { 
 
    display: inline-block; 
 
    margin: 5px; 
 
    height: 30px; 
 
    overflow: visible; 
 
} 
 

 
.btn { 
 
    height: auto; 
 
    padding: 6px; 
 
    color: #111; 
 
    font-size: 16px; 
 
    line-height: 16px; 
 
    background-color: #DDD; 
 
    border: 1px solid #BBB; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    white-space: nowrap; 
 
} 
 

 
.btn:hover { 
 
    background-color: #FFF; 
 
} 
 

 
.btnlist > .btn { 
 
    display: block; 
 
    float: left; 
 
} 
 

 
.btnlist > .btn:not(:last-child) { 
 
    -webkit-border-top-right-radius: 0; 
 
    -webkit-border-bottom-right-radius: 0; 
 
    -moz-border-top-right-radius: 0; 
 
    -moz-border-bottom-right-radius: 0; 
 
    border-top-right-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
} 
 

 
.btnlist > .btn ~ .btn { 
 
    margin-left: -1px; 
 
    -webkit-border-top-left-radius: 0; 
 
    -webkit-border-bottom-left-radius: 0; 
 
    -moz-border-top-left-radius: 0; 
 
    -moz-border-bottom-left-radius: 0; 
 
    border-top-left-radius: 0; 
 
    border-bottom-left-radius: 0; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
} 
 

 
.dropdown:after { 
 
    display: inline-block; 
 
    content: ""; 
 
    height: 0; 
 
    margin: 0 0 0 5px; 
 
    vertical-align: middle; 
 
    border-top: 4px solid #111; 
 
    border-right: 4px solid transparent; 
 
    border-left: 4px solid transparent; 
 
} 
 

 
.dropdownmenu { 
 
    display: none; 
 
    position: absolute; 
 
    top: 28px; 
 
    left: 0; 
 
    margin-top: 2px; 
 
    z-index: 1; 
 
} 
 

 
.dropdown:hover > .dropdownmenu { 
 
    display: block; 
 
} 
 

 
.dropdownmenu > .btn:not(:last-child) { 
 
    -webkit-border-bottom-left-radius: 0; 
 
    -webkit-border-bottom-right-radius: 0; 
 
    -moz-border-bottom-left-radius: 0; 
 
    -moz-border-bottom-right-radius: 0; 
 
    border-bottom-left-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
} 
 

 
.dropdownmenu > .btn ~ .btn { 
 
    margin-top: -1px; 
 
    -webkit-border-top-left-radius: 0; 
 
    -webkit-border-top-right-radius: 0; 
 
    -moz-border-top-left-radius: 0; 
 
    -moz-border-top-right-radius: 0; 
 
    border-top-left-radius: 0; 
 
    border-top-right-radius: 0; 
 
}

<div class="btnlist"> 
 
    <div class="btn">Button 1</div> 
 
    <div class="btn dropdown"> 
 
     Button 2 
 
     <div class="dropdownmenu"> 
 
      <div class="btn">Button 4</div> 
 
      <div class="btn">Button 5</div> 
 
     </div> 
 
    </div> 
 
    <div class="btn">Button 3</div> 
 
</div>

В .dropdownmenu У меня есть правило top: 28px;, и я хотел бы оставить его, как, что (или эквивалентного поведения, как показано на фрагменте кода). Как я могу оставить этот небольшой промежуток между фактическим меню и кнопкой, позволяя поддерживать поведение :hover, если мышь входит в этот пробел?

Answer 1

Вы должны изменить маржу с заполнением.

.dropdownmenu { 
    padding-top: 2px; 
} 

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    cursor: default; 
 
} 
 

 
.btnlist { 
 
    display: inline-block; 
 
    margin: 5px; 
 
    height: 30px; 
 
    overflow: visible; 
 
} 
 

 
.btn { 
 
    height: auto; 
 
    padding: 6px; 
 
    color: #111; 
 
    font-size: 16px; 
 
    line-height: 16px; 
 
    background-color: #DDD; 
 
    border: 1px solid #BBB; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    white-space: nowrap; 
 
} 
 

 
.btn:hover { 
 
    background-color: #FFF; 
 
} 
 

 
.btnlist > .btn { 
 
    display: block; 
 
    float: left; 
 
} 
 

 
.btnlist > .btn:not(:last-child) { 
 
    -webkit-border-top-right-radius: 0; 
 
    -webkit-border-bottom-right-radius: 0; 
 
    -moz-border-top-right-radius: 0; 
 
    -moz-border-bottom-right-radius: 0; 
 
    border-top-right-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
} 
 

 
.btnlist > .btn ~ .btn { 
 
    margin-left: -1px; 
 
    -webkit-border-top-left-radius: 0; 
 
    -webkit-border-bottom-left-radius: 0; 
 
    -moz-border-top-left-radius: 0; 
 
    -moz-border-bottom-left-radius: 0; 
 
    border-top-left-radius: 0; 
 
    border-bottom-left-radius: 0; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
} 
 

 
.dropdown:after { 
 
    display: inline-block; 
 
    content: ""; 
 
    height: 0; 
 
    margin: 0 0 0 5px; 
 
    vertical-align: middle; 
 
    border-top: 4px solid #111; 
 
    border-right: 4px solid transparent; 
 
    border-left: 4px solid transparent; 
 
} 
 

 
.dropdownmenu { 
 
    display: none; 
 
    position: absolute; 
 
    top: 28px; 
 
    left: 0; 
 
    padding-top: 2px; 
 
    z-index: 1; 
 
} 
 

 
.dropdown:hover > .dropdownmenu { 
 
    display: block; 
 
} 
 

 
.dropdownmenu > .btn:not(:last-child) { 
 
    -webkit-border-bottom-left-radius: 0; 
 
    -webkit-border-bottom-right-radius: 0; 
 
    -moz-border-bottom-left-radius: 0; 
 
    -moz-border-bottom-right-radius: 0; 
 
    border-bottom-left-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
} 
 

 
.dropdownmenu > .btn ~ .btn { 
 
    margin-top: -1px; 
 
    -webkit-border-top-left-radius: 0; 
 
    -webkit-border-top-right-radius: 0; 
 
    -moz-border-top-left-radius: 0; 
 
    -moz-border-top-right-radius: 0; 
 
    border-top-left-radius: 0; 
 
    border-top-right-radius: 0; 
 
}

<div class="btnlist"> 
 
    <div class="btn">Button 1</div> 
 
    <div class="btn dropdown"> 
 
     Button 2 
 
     <div class="dropdownmenu"> 
 
      <div class="btn">Button 4</div> 
 
      <div class="btn">Button 5</div> 
 
     </div> 
 
    </div> 
 
    <div class="btn">Button 3</div> 
 
</div>