当我的 AppBorder
元素悬停时,我隐藏的 AppMenu
出现在右侧。但是一旦我将鼠标悬停,AppMenu
会快速下降到 AppBorder
下方,然后消失。我如何摆脱那种奇怪的后遗症,使 AppMenu
在悬停时消失,而不是突然出现在我的主要元素下方?
最佳答案
这是因为您正在使用 CSS :hover
来更改父级的宽度,它不会与使右侧 strip 淡入和淡入的 jquery 同时触发完全退出。可以很好地淡入,但是当您取消 :hover
元素时,会在右侧的 strip 完全移除之前立即移除新宽度,导致它向下方移动,因为宽度不够显示在右侧的水平空间。
虽然你不需要宽度,你可以只使用 display: flex
(或者我使用 display: inline-flex
因为你 float
最初在父级上对该元素进行了编码),它们将并排放置,并且它的行为似乎符合预期。
$(function(){
$('.AppBorder').hover(function(){
var menuId = $(this).attr('data-menuid');
$('#'+menuId).stop(false, true).fadeToggle('fast');
});
});
.AppBorder {
border: 1px solid #898989;
display: inline-flex;
margin: 10px 7px 10px 7px;
}
.AppBorder:hover {
cursor: pointer;
}
.AppImg {
width: 70px;
height:70px;
margin: 3px 0px 0px 3px;
}
#Text {
width: 80px;
height: 16px;
float: left;
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 13px;
font-weight: 500;
text-align: center;
padding: 5px 0px 5px 0px;
}
.AppMenu {
display: none;
}
.IconBorder, .Icon4Border {
border: 1px solid #B7B7B7;
border-top: none;
border-right: none;
width:26px;
height: 18px;
text-align: center;
padding: 4px 0px 2px 0px;
}
.Icon4Border {
border-bottom: none;
}
.Icon {
width: 17px;
height: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="AppBorder" data-menuid="Menu1">
<div id="IconAndText">
<div><img src="I/App1.png" class="AppImg"></div>
<div id="Text">Text</div>
</div>
<div class="AppMenu" id="Menu1">
<div class="IconBorder"><img src="#" class="Icon"></div>
<div class="IconBorder"><img src="#" class="Icon"></div>
<div class="IconBorder"><img src="#" class="Icon"></div>
<div class="Icon4Border"><img src="#" class="Icon"></div>
</div>
</div>
关于javascript - jQuery:隐藏元素在悬停时向下移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43288845/