主页 / user-667470

Egor's questions

Martin Hope
Egor
Asked: 2025-01-17 21:23:48 +0800 CST
  • 5

我的模板：

  <div class="task">
    <div id="cont-1">
      <div class="task__path">
        <p>распарсить путь / /</p>
      </div>
      <app-task-title/>
    </div>
    <div id="cont-2">
      <div class="task__progress">
        <app-progress-bar/>
        <app-executor-time/>
      </div>
      <app-management/>
    </div>
  </div>
</div>

我的 CSS 样式：

@import "../../../../../styles/index.scss";

$display: flex;

.task-wrapper {
  width: 100%;
  height: 130px;
  padding: 12px;
  border-radius: 8px;
  background-color: $bg-menu;
  box-shadow: $shadow-card;
  transition: box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 3px 10px 0 rgba(38, 58, 91, 0.2);
  }

  .task {
    gap: 20px;

    #cont-1 {
      &:hover {
        .task__path {
          display: flex;
        }
      }
    }

    #cont-2 {
      &:hover {
        .task__progress {
          display: none;
        }
        app-management {
          display: flex;
        }
      }
    }

    &__progress {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 12px;
      height: 33px;
    }

    &__path {
      display: none;
    }

    app-management {
      display: none;
    }
  }
}

当我将鼠标悬停在 cont-1 上时，我需要在 task__progress 上使用 display: none ，在 cont-2 中我实现了类似的逻辑，但在 cont-1 中它不起作用，正如我所想的那样，因为元素位于不同的位置当我将鼠标悬停在 cont-1 上时，我需要做什么才能隐藏 task__progress？隐藏 cont-2 也是一个正确的选择

html