angular - 如何将鼠标悬停在一个 div 上以触发两个不同 div 的变化？

Question

我正在用 Angular 6 创建简单的网站，我的部分如下所示

1. 我有四个 div，每个 div 包含图标作为背景，span 带有标题和段落 p 带有描述

2. 当图标悬停时，我有另一个 div 来保存描述，它是空的，名称为 what-we-do__right

UPDATE

这是代码堆栈 Blitz 的链接

https://stackblitz.com/edit/bootstrap-nabar-snoyrg

这是html

<div class="what-we-do">
  <div class="what-we-do__top">
    <div class="what-we-do__left">
      <h2>What we
        <strong>do</strong>
      </h2>
    </div>

    <div class="what-we-do__right">

    </div>
  </div>
  <div class="animation">
    <div class="center">
      <div class="sat1">
        <span>Managed</span>
        <strong>Service</strong>"
        <p>Managed Service gives our customers the opportunity to reduce the costs of the project and guarantees higher standards
          of work, while maintaining complete control over the different phases of our consultants working progress.</p>
      </div>
      <div class="sat2">
        <span>Managed</span>
        <strong>Service</strong>"
        <p>Managed Service gives our customers the opportunity to reduce the costs of the project and guarantees higher standards
          of work, while maintaining complete control over the different phases of our consultants working progress.</p>
      </div>
      <div class="sat3">
        <span>Managed</span>
        <strong>Service</strong>"
        <p>Managed Service gives our customers the opportunity to reduce the costs of the project and guarantees higher standards
          of work, while maintaining complete control over the different phases of our consultants working progress.</p>
      </div>
      <div class="sat4">
        <span>Managed</span>
        <strong>Service</strong>"
        <p>Managed Service gives our customers the opportunity to reduce the costs of the project and guarantees higher standards
          of work, while maintaining complete control over the different phases of our consultants working progress.</p>

      </div>
      <h3>
        <span>IT</span>
        <strong>Outsourcing</strong>
      </h3>

    </div>
  </div>

这是我在一个图标上试过的 css。

.sat1:hover p span strong,{
   visibility: visible;
    background: url('/assets/images/ico_1_dark.png') center center no-repeat #d9e5ca
}

 .sat1 p{
    position: absolute;
    bottom: 80px;
    margin-left: 700px;
    color: red;
    visibility: hidden;
}
.sat1 span strong{
    position: absolute;
    bottom: 80px;
    margin-left: 700px;
    color: red;
    visibility: hidden;
}

但我的解决方案没有按预期工作，

我是新手，请帮忙，如何实现我想要的？

如有任何帮助，我们将不胜感激。

Answer 1

您还可以在组件中为每个标题使用变量，并根据悬停在哪个按钮上更改这些值。

在您的 html 中，您只需使用插值显示这些变量:例如 {{variable}}。

请看这个例子:https://stackblitz.com/edit/bootstrap-nabar-eb7bix