Question

当我进入不同的视图（例如1024 X 768）时，悬停就像点击一样。但是在正常的笔记本电脑尺寸窗口中却可以正常工作。

当我将鼠标悬停在链接上时，它会变成蓝色，但是在小尺寸屏幕上，它不会在鼠标悬停时变色，而在点击时会变色

下面是HTML代码

<div class="account-wrapper">
<ul>
<li>{{...}}
<span   class="helpIcon icon-interface-question-mark" (click)="toggleHsaInfo()"> 
</span>
</li>
</ul>
<div>

下面是scss代码

.account-wrapper {
  border-bottom: 1px solid $border-color;
  .icon-interface-question-mark {
    position: relative;
    cursor: pointer;

    &:hover {
      color:blue;
    }
  }

我试图这样解决

@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
{

.account-wrapper{
  .icon-interface-question-mark{
    &:hover {
      color: blue;
    }
  }
}
}

Answer 1

我相信您的问题与无法悬停的移动设备有关。您可以通过多种方式完成此操作，但我更喜欢CSS媒体查询。

.account-wrapper {
  border-bottom: 1px solid green;
  .icon-interface-question-mark {
    position: relative;
    cursor: pointer;
  }
}

@media (hover: hover) {
    .helpIcon:hover { color: blue; }
}


@media(hover:none){
    *:hover { color: inherit !important; }
    *:active {color: blue !important;}
}

您也可以尝试@media(hover:on-demand)

示例：https://stackblitz.com/edit/angular-ou67ut?file=src%2Fapp%2Fapp.component.scss

悬停在小尺寸视图中充当点击

1 个答案: