当将鼠标悬停在自身而不是父元素上时，元素会保留父级的悬停时属性

Question

.filename-display {
    padding: 0 2px 0 7px
}
.filename-display:hover~.thumb-list-view {
    display: block;
}
.thumb-list-view {
    display: none;
    position: absolute;
    z-index: 2;
    top: -90px;
    height: 90px;
    width: 120px;
    pointer-events: none;
}
.thumb-list-view img {
    height: 90px!important;
    width: 120px!important;
}

<div class="text-ellipsis filename-display">Material Name</div>
<div class="thumb-list-view thumb-list-view-22" style="margin-top: 125px;">
	<img class="thumb-img" ng-src="https://thumb1.shutterstock.com/display_pic_with_logo/2764438/389965999/stock-vector-vector-laptop-personal-computer-in-flat-style-desktop-computer-computer-icon-isolated-on-389965999.jpg" src="https://thumb1.shutterstock.com/display_pic_with_logo/2764438/389965999/stock-vector-vector-laptop-personal-computer-in-flat-style-desktop-computer-computer-icon-isolated-on-389965999.jpg">
</div>

使用此代码，当用户将鼠标悬停在文件名显示div 上时，我在文件名显示div 下方显示一个拇指图像。一旦您将鼠标从名称中删除，图像就会被隐藏。当您将鼠标悬停在名称上并向下滚动时，会出现此问题，其中隐藏图像需要一瞬间。只是想知道那一瞬间是 DOM 更新的滞后还是可以消除这种滞后？

Answer 1

当您尝试在悬停时显示图像时，似乎存在链接问题。没有类作为 .material-name，但仍用于应用悬停事件。尝试将其删除。它按预期工作

.material-list .filename-display {
    padding: 0 2px 0 7px
}
.filename-display:hover~.thumb-list-view {
    display: block;
}
.thumb-list-view {
    display: none;
    position: absolute;
    z-index: 2;
    top: -90px;
    height: 90px;
    width: 120px;
    pointer-events: none;
}
.thumb-list-view img {
    height: 90px!important;
    width: 120px!important;
}

<div class="text-ellipsis filename-display">Material Name</div>
<div class="thumb-list-view thumb-list-view-22" style="margin-top: 125px;">
	<img class="thumb-img" ng-if="material.material_type === msvm.materialConfig.materialType.fabric" ng-src="http://10.127.22.171:8080/DesignPortal/mos/app/60031755_front_tile.jpg" dp-image-fallback-src="img/mos/apparel/fabric/type-na/woven.jpg" src="img/mos/apparel/fabric/type-na/woven.jpg">
</div>