改变: 悬停到触摸/点击移动设备

我四处看了看，但是找不到我要找的东西。

我目前有一个 CSS 动画在我的页面，这是触发: 悬停。我想这改变为’点击’或’触摸’时，页面大小调整超过宽度700像素使用媒体查询。

以下是我目前所掌握的: http://jsfiddle.net/danieljoseph/3p6Kz/

正如你所看到的，: hover 不能在移动设备上工作，但是我仍然希望通过点击确保它能以同样的方式工作，而不是悬停。

如果可能的话，我更愿意使用 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.

下面是 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;
}
343955 次浏览
小开
最佳答案

如果将: active 选择器与: hover 结合使用，只要在: hover 选择器之后调用: active 选择器，就可以根据 w3学校 实现这一点。

 .info-slide:hover, .info-slide:active{
height:300px;
}

你必须在移动环境中测试 强，我现在不能。
更正 -我刚刚在手机上测试过，它工作得很好

小开

您可以将 onclick=""添加到悬浮元素。悬浮将在此之后工作。

编辑: 但是你真的不应该添加任何与你的标记相关的样式，只是发布它作为一个替代。

小开

我是一个 CSS 菜鸟，但我已经注意到，悬停将工作的触摸屏，只要它是一个“悬停”的元素: 图像，链接，按钮。您可以使用以下技巧使用 CSS 完成所有工作。

将 div 背景更改为 div 中的实际图像标记，或者在整个 div 周围创建一个虚拟链接，然后当您触摸图像时，它将注册为悬停。

这样做将意味着你需要你的页面的其余部分也是“悬停”，所以当你触摸外面的图像，它识别信息幻灯片: 悬停已经结束。我的技巧是使我的所有其他内容虚拟链接。

虽然不是很优雅，但很管用。

小开

我在使用微软 Edge 浏览器的移动设备上也遇到了同样的麻烦。我可以用: aria-haspopup="true"来解决这个问题。它需要为其他移动浏览器添加 div 和 :hover、 :active、 :focus。

Example html:

<div class="left_bar" aria-haspopup="true">

CSS:

.left_bar:hover, .left_bar:focus, .left_bar:active{
left: 0%;
}
小开

在大多数设备上，其他答案都有效。对我来说，为了确保它在 每个设备上工作(作为反应) ，我必须将它包装在锚标记 <a>中，并添加以下内容: 以及 role="button"和 tabIndex="0"。

小开 
document.addEventListener("touchstart", function() {}, true);

这个代码片段将为触摸屏启用悬停效果

小开

我同意以上的答案，但仍然有另一种方法可以做到这一点，它是使用 media查询。

Suppose this is what you want to do :

body.nontouch nav a:hover {
background: yellow;
}

然后你可以通过媒体查询来完成:

@media(hover: hover) and (pointer: fine) {
nav a:hover {
background: yellow;
}
}

And for more details you can visit 这个 page.

小开

我认为这个简单的方法可以达到这个目的。 使用 CSS，你可以关闭指针事件到“无”，然后使用 jQuery 切换类。

.item{
pointer-events:none;
}


.item.clicked{
pointer-events:inherit;
}
 

.item:hover,.item:active{
/* Your Style On Hover Converted to Tap*/
background:#000;
}

Use jQuery to switch classed:

jQuery('.item').click(function(e){
e.preventDefault();
$(this).addClass('clicked')l
});

小开

一个 CSS 的唯一解决方案，为那些有麻烦的移动触摸屏按钮样式。

这将解决您的悬停杆/活动按钮问题。

body, html {
width: 600px;
}
p {
font-size: 20px;
}


button {
border: none;
width: 200px;
height: 60px;
border-radius: 30px;
background: #00aeff;
font-size: 20px;
}


button:active {
background: black;
color: white;
}


.delayed {
transition: all 0.2s;
transition-delay: 300ms;
}


.delayed:active {
transition: none;
}
<h1>Sticky styles for better touch screen buttons!</h1>


<button>Normal button</button>


<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>


<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>


<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>


提交答案