Css “悬停”在小尺寸视图中起单击作用

当我转到不同的视图（如1024x768）时，hover的作用是单击。但它在普通笔记本电脑大小的窗口中工作正常

---

当我将鼠标悬停在链接上时，它会将颜色更改为蓝色，但在小屏幕上，它不会在悬停时更改颜色，而是在单击时更改颜色

下面是HTML代码

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

我试着这样解决

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

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

---

我相信你的问题与没有悬停功能的移动设备有关。您可以通过各种方式来实现这一点，但我更喜欢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（悬停：按需）

---

示例：

请共享您的HTML代码请立即检查“悬停作为单击”是什么意思？你希望你的代码做什么？当我将鼠标悬停在链接上时，它会将颜色更改为蓝色，但在小屏幕上，它不会在悬停时更改颜色，它会在单击时更改颜色谢谢，但我们只希望使用蓝色。我更新了答案，我仍然不确定你在移动设备上想要什么。我猜在移动设备上活动不起作用，我的问题是，在手机中，如果我触摸链接，它应该是蓝色的，如果我不触摸它，它应该不是蓝色的。i、 e它应该是蓝色的，只有当我在触摸上面的链接时，如果用户没有触摸它，你能使边框框褪色吗（一旦用户触摸它）

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