CSS :hover on mobile 充当点击答案

【问题标题】：CSS :hover on mobile act as clickCSS :hover on mobile 充当点击
【发布时间】：2016-02-14 22:00:26
【问题描述】：

我目前有一个包含一些信息的 div。请参见下面的示例：

<div class="verstuurd" onclick="alert('clicked!');">
    <div class="titel"><span>Title</span><img src="imageurl"/></div>
    <div class="image"><img src="imageurl"/></div>
    <div class="tekst"><p>some text</p></div>
    <div class="hover">
        VISIBLE TEXT
    </div>
    <div class="delen">
        VISIBLE AFTER HOVER
    </div>
</div>
</div>

:hover 功能完美运行，“delen”部分显示，“hover”部分隐藏。我只在移动设备上遇到问题。如果我在移动设备上向下滚动页面并触摸 div，将触发悬停。

我正在寻找的答案是；我如何在 PC 上使用 :hover 并在移动设备上使用某种点击事件？所以我必须单击才能更改内容，第二次单击将触发 div 的 onclick。

作为我的灵感示例，请参阅website。

如果您将鼠标悬停在某个项目上，它将显示心形图标。 PC 将其与悬停一起使用，而移动设备需要单击才能显示。不幸的是，我找不到触发它的源代码。

【问题讨论】：

好吧，撇开让访问者点击两次以访问内容这一事实不谈，您可能需要使用 javascript 来做到这一点。
您可以制作两个元素，一个用于 pc 版本，一个用于移动版本，并使用 css 媒体查询显示/隐藏它们。然后对于一个你会有悬停事件和其他点击事件
@John :hover 就像点击一样（因为您不能将鼠标悬停在移动设备上的项目上）。
@YounesMgharfaoui 没错，但不幸的是，当我在 iPhone 上滚动并触摸 div 时，它会切换内容。这意味着 :hover 被触发。两个版本完全没有问题，但是css有点击事件吗？ :active 和 :focus 不能正常工作......
@Younes 这就是为什么我说每个版本都有两个元素。对于移动设备，您将拥有必须单击两次的元素，但对于具有悬停 + 单击的 pc 元素。

标签： html css hover

【解决方案1】：

您是在说，您希望在触摸 div 时触发 onClick="theFunctionNameToBeCalled()"（特别是在移动设备上？）

如果你愿意，你可以使用

$( "#divIdToBeTouced" ).click(function() {
  //do something with a function here
});

或者您可以使用普通的 JavaScript 来完成任务。

<!DOCTYPE html>
<html>
<head>
<title>Coty's Title</title>
</head>
<body>

<div id="divIdToBeTouched" onmouseover="theFunctionToBeCalled()" onClick="theFunctionToBeCalled()">
I'm a div
</div>

<script>
var i = 0;
function theFunctionToBeCalled(){
  i++;
  if(i == 2) {
    //do what you wanted once the onClick event was fired
    alert("i == 2");
    //now make sure to reset the flag that was made so it will work     next time
    i = 0;
  }
  else {
    //change the content
    alert("i == 1");
  }
    //do something interesting here if you want to
}

</script>
</body>
</html>

将该代码粘贴到此页面上http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default？您可以在浏览器计算机上试用并在移动设备上尝试它应该可以工作我测试过了

现在让悬停事件也调用这个函数，它会覆盖两个事件

额外信息：

我听说过从这里出发的两种可能路径的争论，有人说一种方式是“危险的”，如果你想知道的话，我会在下面列出这些方面......

继续

另一个参数是需要添加一个事件侦听器而不是直接函数调用这似乎更安全。我认为是因为它可以帮助隐藏函数调用它的自身..？我不知道。

希望对你有帮助

【讨论】：