Question

我已经环顾四周但却无法找到我想要的东西。

我目前在我的页面上有一个css动画，它由以下内容触发：hover。我希望在使用媒体查询调整页面大小超过宽度700px时，将其更改为“点击”或“触摸”。

以下是我现在的情况：http://jsfiddle.net/danieljoseph/3p6Kz/

正如您所看到的，：hover在移动设备上不起作用，但我仍然希望确保它只是通过点击而不是悬停来工作。

如果可能，我宁愿使用css，但也对JQuery感到满意。

我有一种感觉，这很容易做到，但我只是遗漏了一些非常明显的东西！任何帮助将不胜感激。

这是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;
}

Answer 1

如果您使用：主动选择器与：hover，只要在：hover选择器之后调用：active选择器，您就可以根据w3schools实现此目的。

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

您必须在移动环境中测试FIDDLE。我现在不能。
更正 - 我刚刚在手机上测试过，效果很好

Answer 2

您可以将onclick=""添加到悬停元素。哈弗将在那之后工作。

编辑：但你真的不应该添加与你的标记相关的任何风格，只是将其作为替代方式发布。

Answer 3

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

示例html：

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

CSS：

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

Answer 4

我认为这种简单的方法可以实现此目标。使用CSS，您可以将指针事件关闭为“ none”，然后使用jQuery切换类。

.item{
   pointer-events:none;
 }

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

使用jQuery切换分类：

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

Answer 5

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

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

执行此操作意味着您需要将页面的其余部分也“悬停”，因此当您触摸图像外部时，它会识别出信息幻灯片：悬停已结束。我的诀窍是将所有其他内容虚拟链接。

它不是很优雅，但它有效。

Answer 6

在大多数设备上，其他答案有效。对我来说，要确保它在每个设备上都能正常工作（以响应方式），我必须将其包装在锚定标签SELECT o.orderNumber, o.orderDate, MAX(d.quantityOrdered * d.priceEach) AS totalAmt FROM orderdetails d, orders o WHERE d.orderNumber = o.orderNumber GROUP BY o.orderNumber, o.orderDate HAVING MAX(d.quantityOrdered * d.priceEach) > 5000中，并添加以下内容： <a>，:hover，:focus（按此顺序）以及:active和role="button"。

Answer 7

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

此代码段将为触摸屏启用悬停效果

Answer 8

我同意上面的答案，但是仍然可以使用media查询来实现。

假设这是您想要做的：

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

然后您可以通过媒体查询执行以下操作：

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

有关更多详细信息，请访问this页面。

Answer 9

针对那些在移动触摸屏按钮样式上遇到麻烦的人的纯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>

更改：悬停触摸/单击移动设备

9 个答案: