如何在内部 div 悬停时从外部 div 中删除图标？

Posted 2023-03-06

【中文标题】如何在内部 div 悬停时从外部 div 中删除图标？

【英文标题】：How to remove icons from outer div on inner div hover?

【发布时间】：2021-11-24 07:57:09

【问题描述】：

有两个 div，两个 div 的角落都有一个图标来编辑它们的属性。我希望在任何特定时间只出现一个图标。当悬停在外部 div 上时，图标显示在外部 div 角落。当悬停在内部 div 上时，图标框会显示在两个 div 中。将鼠标悬停在内部 div 上时，如何抑制外部 div 图标框。 这是我的代码

$(".icons").parent().hover(function()  // Mouse over
  $(this).find('.icons').first().css('display', 'block');
, function()  // Mouse out
    $(this).find('.icons').first().css('display', 'none');
);

    .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: '^';
        size: 22px;
        background-color: gold;
        color: honeydew;
        width: 20px;
        height: 15px;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer">    
    <div class="icons"></div>
    <div class="inner">
        <div class="icons"></div>
    </div>
</div>

我只想一次只显示一个图标框。因此，当在内部 div 中时，我不想显示外部 div 中的图标。

【参考方案1】：

我使用 mouseenter 和 mouseleave 使它更灵活 通过在您进入 Div 时使其处于活动状态 当您离开 Div 时，他的父母将处于活动状态

 $(".show-icons").mouseenter(function (e)  // Mouse over
    $(".icons").hide();
    $(this).find('.icons').first().show();
  );
  $(".show-icons").mouseleave(function (e)  // Mouse over
    $(".icons").hide();
    $(this).parents(".show-icons").first().find('.icons').first().show()
  );

.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;
    display: flex;
    align-items: center;
    justify-content: center;
  

  .inner-2 
    width: 100px;
    height: 50px;
    background-color: #ccc;
    position: relative;
  

  .icons 
    content: '^';
    size: 22px;
    background-color: gold;
    color: honeydew;
    width: 20px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <div class="outer show-icons">
    <div class="icons"></div>
    <div class="inner show-icons">
      <div class="icons"></div>
      <div class="inner-2 show-icons">
        <div class="icons"></div>
      </div>
    </div>
  </div>

【参考方案2】：

我能想到实现这一点的唯一方法是在 JS 中单独检查，如果鼠标悬停在内部 div 上，则只显示外部 div 图标：无，但是，我不太确定这是怎么做到的将被实现，因为我到目前为止没有使用 jquery，也没有研究 hover() 函数。

你可以让它像，如果鼠标悬停在外部 div 上，然后显示它的外部图标，如果它也将鼠标悬停在内部 div 上，那么你可以将外部图标显示设置为无和内部图标显示块。我相信你可能需要事件监听器。

【参考方案3】：

因为内部 div 完全包含在外部 div 中，您可以只监听外部 div 上的鼠标移动（over/out），选择目标元素是什么并设置/取消设置其图标以显示块/无.

  const outer = document.querySelector('.outer');
  outer.addEventListener('mouseover', function (e) 
    e.target.querySelector('.icons').style.display = 'block';
  );
  outer.addEventListener('mouseout', function (e) 
    e.target.querySelector('.icons').style.display = 'none';
  );

        .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: '^';
            size: 22px;
            background-color: gold;
            color: honeydew;
            width: 20px;
            height: 15px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        

    <div class="outer">    
        <div class="icons"></div>
        <div class="inner">
            <div class="icons"></div>
        </div>
    </div>