如何在hover内部div时隐藏外部div的编辑图标

问题根源 #

嵌套元素的hover事件会默认向上冒泡，你hover内部.inner元素时，事件也会触发外层.outer的hover回调，所以两个图标都会显示。另外你原CSS里写的size: 22px是无效属性，要改成font-size才能正常生效。

方案1：纯CSS实现（推荐，性能更高无需JS） #

直接删掉原来的JS逻辑，替换成以下CSS即可：

.outer{
    width: 500px;
    height: 200px;
    background-color: fuchsia;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.inner{
    width: 300px;
    height: 100px;
    background-color: #2c132c;
    position: relative;
}
.icons{
    content: '^';
    font-size: 22px;
    background-color: gold;
    color: honeydew;
    width: 20px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
/* 新增hover控制规则 */
.outer:hover > .icons {
    display: block;
}
.inner:hover > .icons {
    display: block;
}
/* hover内部元素时强制隐藏外层图标 */
.outer:has(.inner:hover) > .icons {
    display: none;
}

方案2：修改JS实现（兼容不支持CSS :has伪类的旧浏览器） #

把原来的JS代码替换成以下内容即可：

$(".icons").parent().hover(function(e) {
  // 阻止事件冒泡到父级元素
  e.stopPropagation();
  // 先隐藏所有图标
  $(".icons").hide();
  // 只显示当前hover元素下的直接子图标
  $(this).children('.icons').show();
}, function(e) {
  e.stopPropagation();
  $(this).children('.icons').hide();
  // 离开内部元素时，如果还在外层元素范围内，恢复显示外层图标
  if ($(this).hasClass('inner') && $(e.relatedTarget).closest('.outer').length) {
    $('.outer > .icons').show();
  }
});

内容的提问来源于stack exchange，提问作者Joy