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

Question

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用此代码，当用户将鼠标悬停在名称上时，我会在文件名显示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>