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

问题描述

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

我有四个 div，每个 div 包含作为背景的图标，带有标题和带有描述span的段落p
当图标悬停时，我有另一个 div 来保存描述，它是 empyt 的名称what-we-do__right

更新

这是stackblitz代码的链接

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

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

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

任何帮助，将不胜感激。

标签： angularhtmlcss

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

问题描述

解决方案

推荐阅读