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

Question

我设计了一个按钮：

.subscribe_button {
   background-color: red;
}

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

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

Answer 1

S3C于2019-12-03开始编辑

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

在这种情况下，我需要在导航中使用此解决方案，其中所有导航链接都位于<li>网站桌面版本的标签中，以及网站移动版本的<button>或<div>标签（使用 bootstrap 样式）。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，下拉菜单的所有父级都是具有完全相同样式的按钮。

当鼠标可用时，您需要悬停来更改文本颜色，以便用户知道这是一个可单击的链接。但在触摸屏上，您不希望颜色发生变化，因为正如您所发现的，单击后它不会消失。

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

Jacque Goupil的回答给了我们一条线索。

他表示

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

想必他们是通过阅读hoveras来做到这一点的focus。

因此解决方案很简单！

超文本标记语言

<!-- 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>

注意：此处使用 引导类btn和。这些都是没有必要的。另外，我的 JS 函数会将属性的值更改为，如果该值是当前的，否则会将其更改为。btn-defaultshow_or_hide_by_id()displaynoneblockblock

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 选择器的顺序并不重要，但重要的是要有button: focusAFTER button: hover。

原帖结束