悬停按钮背景颜色保留在移动设备上

我设计了一个按钮：

.subscribe_button {
   background-color: red;
}
.subscribe_button:hover { 
   background-color: black;
}

当我将鼠标悬停在按钮上时，它会变黑。但是，在移动设备上，即使悬停后，按钮的背景色也保持黑色。所以我将鼠标悬停在按钮上，它变黑并保持黑色如何防止悬停后保持黑色？

开始由 S3C 于 2019-12-03 编辑

如果一切设置正确，此解决方案应该有效。但是我偶然发现了一个代码沙拉的情况(不同目录中的一堆非常无组织的CSS文件，相同的样式规则被覆盖了太多次，很多!important s等(。我们的预算紧张，必须很快完成。

在这种情况下，我需要在导航中使用此解决方案，其中所有导航链接都位于网站桌面版本的<li>标签中，以及<button>或<div>标签(使用引导class="btn"设置样式(用于网站的移动版本。

以下CSS

是用"相同"指令覆盖所有其他CSS的CSS，并使浏览器在移动模式下单击后显示这些按钮的绿色而不是白色：

.pre-header .container .row .btn a:hover {
    color: #205c1b !important;
}

所以我只是再次覆盖它仅用于移动设备(就在前面的代码下方(：

@media(max-width: 600px) {
    .pre-header .container .row .btn a:hover {
        color: #fff !important;
    }
}

注意：你不应该这样做事！但如果你有时间压力，它确实有效。

结束编辑

开始 S3C 于 2019-03-22 发布

我一直在寻找解决同样问题的方法。

就我而言，我有一个使用引导类制作的导航。所有直接链接都是div，下拉菜单的所有父级都是具有完全相同样式的按钮。

当鼠标可用时，您可能希望悬停以更改文本颜色，以便用户知道这是一个可单击的链接。在触摸屏上，虽然你不希望颜色变化，因为正如你已经发现的那样，点击后它不会消失。

不要绝望，有一个解决方案。

雅克·古皮尔的回答给了我们一个线索。

他说，

大多数移动浏览器将hover应用于上次触摸的元素

据推测，他们通过将hover读作focus来做到这一点。

因此，解决方案很简单！

.HTML

<!-- Non-minimum markup to show how it can be used -->
<div class="btn btn-default">
  <a href="link-1">LINK 1</a>
</div>
<button class="btn btn-default" onclick="show_or_hide_by_id('dropdown-2')">
  (non)LINK 2
</button>
<div id="dropdown-2">
  <div class="btn btn-default">
    <a href="link-2-1">LINK 2.1</a>
  </div>
  <div class="btn btn-default">
    <a href="link-2-2">LINK 2.2</a>
  </div>
</div>

注意：此处使用 Bootstrap 类 btn 和 btn-default。这些不是必需的。另外show_or_hide_by_id()是我的JS函数，如果该值当前block，则display属性的值更改为none，否则将其更改为block。

.CSS

div,
button {
  color: #666;
}
a {
 color: inherit;
}
a:hover,
button:hover { // first :hover
  color: #66f;
}
button:focus { // second :focus
  color: inherit;
}
#dropdown-2 {
  display: none;
}

注意：所有其他 CSS 选择器的顺序无关紧要，但重要的是有 AFTER button: hover button: focus。

结束原始帖子

触摸屏无法检测到"悬停"。触摸屏幕算作点击，而不是悬停。

大多数移动浏览器都会:hover样式应用于上次触摸的元素。这允许即使在移动设备上使用下拉菜单。你无能为力来防止这种情况。我测试了选择:hover:not(:active):not(:focus)，它没有帮助。

松开按钮后，它会保持活动状态(聚焦(。

要解决它，您可以执行以下操作：

.subscribe_button:active {
   background-color: red;
}

此解决方案使用伪类focus将背景色设置为初始按钮颜色：

button {
    background-color: red;
}
button:hover {
    background-color: black;
}
button:focus {
    background-color: red;
}
button:active {
    background-color: #d70000;
}

这在移动设备上工作正常，但在桌面设备上，点击的按钮仍然设置了hover和focus属性：将鼠标悬停在点击的按钮上会导致没有任何反馈(直到其他元素获得焦点(。

仅使hover伪类可用于带有鼠标的桌面设备：

/* for mouse devices */
@media (hover: hover), (-moz-touch-enabled: 0), (pointer:fine) {
    button:hover {
        background-color: red;
    }
}
button:active {
    background-color: black;
}

这就是为什么：

注意：：hover 伪类在触摸屏上存在问题。根据浏览器的不同，：hover 伪类可能永远不匹配，仅在触摸元素后匹配片刻，或继续即使在用户停止触摸后也匹配，直到用户触及另一个元素。

从 https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

相关内容

最新更新

热门标签：