Question

I styled a button:

.subscribe_button {
   background-color: red;
}

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

When I hover over the button, it turns black. However, on mobile, the background color of the button remains black even after hover. So I hover over the button, it turns black and remains black How do I prevent it from remaining black after hover?

Answer 1

我一直在寻找解决这个问题的方法。

就我而言，我使用引导程序类进行了导航。所有直接链接都是div，下拉菜单的所有父项都是样式完全相同的按钮。

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

不要失望，有解决方案。

Jacque Goupil的answer为我们提供了一个线索。

他说

大多数移动浏览器会将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>

注意： 此处使用引导类btn和btn-default。 这些不是必需的。另外，show_or_hide_by_id()是我的JS函数，如果当前值为display，则将none属性的值更改为block，否则将其更改为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选择器的顺序无关紧要，但是在button: focus之后放置button: hover很重要。

Answer 2

当你的按钮被释放时，它会保持活动状态（聚焦）。

要解决它，你可以这样做：

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

Answer 3

触摸屏无法检测到＆＃34;悬停＆＃34;。触摸屏幕计为点击，而不是悬停。

大多数移动浏览器会在最后触及的元素上应用:hover样式。这允许即使在移动设备上也可以使用下拉菜单。你无法阻止这一点。我测试了选择:hover:not(:active):not(:focus)并且它没有帮助。

hover button background color remains on mobile

3 个答案: