CSS 更改 :hover 以触摸/点击移动设备
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22559756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing :hover to touch/click for mobile devices
提问by DannyBoy
I've had a look around but can't quite find what i'm looking for.
我环顾四周，但无法完全找到我要找的东西。
I currently have a css animation on my page which is triggered by :hover. I would like this to change to 'click' or 'touch' when the page is resized past width 700px using media queries.
我目前在我的页面上有一个由 :hover 触发的 css 动画。当使用媒体查询将页面调整为超过 700 像素的宽度时，我希望将其更改为“点击”或“触摸”。
Here is what i have at the moment: http://jsfiddle.net/danieljoseph/3p6Kz/
这是我目前所拥有的：http: //jsfiddle.net/danieljoseph/3p6Kz/
As you can see, the :hover will not work on mobile devices but i still want to ensure it works the same way just by click, not hover.
如您所见，:hover 在移动设备上不起作用，但我仍然想确保它仅通过单击而不是悬停以相同的方式工作。
I would rather use css if possible but happy with JQuery also.
如果可能，我宁愿使用 css，但也对 JQuery 感到满意。
I have a feeling this is very easy to do but i am just missing something very obvious! Any help would be appreciated.
我有一种感觉，这很容易做到，但我只是遗漏了一些非常明显的东西！任何帮助，将不胜感激。
Here is the css animation:
这是css动画：
.info-slide {
position:absolute;
bottom:0;
float:left;
width:100%;
background:url(../images/blue-back.png);
height:60px;
cursor:pointer;
overflow:hidden;
text-align:center;
transition: height .4s ease-in-out;
-webkit-transition: height .4s ease-in-out;
-moz-transition: height .4s ease-in-out;
}
.info-slide:hover {
height:300px;
}
回答by LOTUSMS
If you use :active selector in combination with :hover you can achieve this according to w3schoolsas long as the :active selector is called after the :hover selector.
如果您将 :active 选择器与 :hover 结合使用，只要在 :hover 选择器之后调用 :active 选择器，就可以根据w3schools实现这一点。
.info-slide:hover, .info-slide:active{
height:300px;
}
You'd have to test the FIDDLEin a mobile environment. I can't at the moment.
correction- I just tested in a mobile, it works fine
您必须在移动环境中测试FIDDLE。我现在不能。
更正- 我刚刚在手机上测试过，效果很好
回答by MindlessRanger
You can add onclick=""to hovered element. Hover will work after that.
您可以添加onclick=""到悬停元素。之后悬停将起作用。
Edit: But you really shouldn't add anything style related to your markup, just posted it as an alternative.
编辑：但你真的不应该添加任何与你的标记相关的样式，只是将它作为替代发布。
回答by Steve_Angel
I got the same trouble, in mobile device with Microsoft's Edge browser. I can solve the problem with: aria-haspopup="true". It need to add to the div and the :hover, :active, :focusfor the other mobile browsers.
我遇到了同样的问题，在使用 Microsoft 的 Edge 浏览器的移动设备中。我可以解决这个问题：aria-haspopup="true"。对于其他移动浏览器，它需要添加到 div 和:hover, 。:active:focus
Example html:
示例 html：
<div class="left_bar" aria-haspopup="true">
CSS:
CSS：
.left_bar:hover, .left_bar:focus, .left_bar:active{
left: 0%;
}
回答by indapublic
document.addEventListener("touchstart", function() {}, true);
This snippet will enable hover effects for touchscreens
此代码段将为触摸屏启用悬停效果
回答by Ryan Walker
On most devices, the other answers work. For me, to ensure it worked on everydevice (in react) I had to wrap it in an anchor tag <a>and add the following:
:hover, :focus, :active(in that order), as well as role="button"and tabIndex="0".
在大多数设备上，其他答案都有效。对我来说，为了确保它适用于每个设备（在反应中），我必须将它包装在一个锚标签中<a>并添加以下内容：
:hover, :focus, :active（按此顺序），以及role="button"和tabIndex="0"。
回答by user6679588
I am a CSS noob but I have noticed that hover will work for touch screens so long as it's a "hoverable" element: image, link, button. You can do it all with CSS using the following trick.
我是一个 CSS 菜鸟，但我注意到只要它是一个“可悬停”元素：图像、链接、按钮，悬停就适用于触摸屏。您可以使用以下技巧使用 CSS 完成所有操作。
Change your div background to an actual image tag within the div or create a dummy link around the entire div, it will then register as a hover when you touch the image.
将您的 div 背景更改为 div 内的实际图像标签，或在整个 div 周围创建一个虚拟链接，然后当您触摸图像时，它将注册为悬停。
Doing this will mean that you need the rest of your page to also be "hoverable" so when you touch outside of the image it recognizes that info-slide:hover has ended. My trick is to make all of my other content dummy links.
这样做意味着您需要页面的其余部分也可以“悬停”，因此当您触摸图像外部时，它会识别出 info-slide:hover 已结束。我的诀窍是让我所有的其他内容虚拟链接。
It's not very elegant but it works.
它不是很优雅，但它有效。
回答by Prateek Gupta
Well I agree with above answers but still there can be an another way to do this and it is by using mediaqueries.
好吧，我同意上述答案，但仍然可以有另一种方法来做到这一点，那就是使用media查询。
Suppose this is what you want to do :
假设这是你想要做的：
body.nontouch nav a:hover {
background: yellow;
}
then you can do this by media query as :
那么你可以通过媒体查询来做到这一点：
@media(hover: hover) and (pointer: fine) {
nav a:hover {
background: yellow;
}
}
And for more details you can visit thispage.
有关更多详细信息，您可以访问此页面。
