Question

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

我有四个div，每个div都包含图标作为背景，span带有标题，段落p带有说明
当鼠标指针悬停在empyt上的图标名为what-we-do__right

更新

这是指向代码闪电战的链接

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

Answer 2

我重构了您的代码。有一种更好的方法。这是一个示例：https://stackblitz.com/edit/so-hover。这是重构的摘要：

您的CSS工作开箱即用，我没有碰过。
将所有服务移至list变量，更易于管理内容，您只需使用*ngFor（不太less肿的模板）在UI中循环列表即可。
使用变量selectedId存储当前的mouseover项目ID。
使用仅获取变量selectedItem获取所选项目或默认项目。
简化模板以使用上述更改。

Answer 3

正如Chybie所说，最好使用stackblitz示例，但您可以尝试：

<div class="sat1" (mouseenter)="showText(1)" (mouseleave)="showText(0)">

<div *ngIf="showText1">
  <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>

然后在.ts文件中

showText( index ) {
    if (index == 0){
       this.showText1 = false;
       ....
       this.showText4 = false;
    }
    if (index == 1){
       this.showText1 = true;
    }
    ...
    if (index == 4){
       this.showText4 = true;
    }
}

这段代码确实很丑陋，您可以使用and数组编写每个文本的状态来更好地编写它，但是想展示其基础知识。

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

3 个答案: