【问题标题】:Make Button visible on mouse hover使按钮在鼠标悬停时可见
【发布时间】:2017-10-05 09:47:17
【问题描述】:

我想在一个有摄像头流的 html 网页中添加一些按钮(即播放、暂停等)。我的目标是让这些按钮在鼠标悬停时可见。谷歌搜索后,我发现这段代码在 Chrome、Mozilla、Safari 中运行良好,但在我的 iPhone 上根本不起作用。请看下面的代码:

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
   <style type="text/css">
      .HeaderBarThreshold:hover input[type="submit"]
      {
            visibility:visible !important; 
      }
     </style>
</head>
<body ontouchstart="">
  <div class="HeaderBarThreshold" onclick=()>

  Hover over here to make button visible
    <input type="submit" value="Click me" style="visibility:hidden;"/>
  </div>
    <br/>
</body>
</html>

奇怪的想法是,如果我在 iPhone 上的 JSBin 或 jsfiddle 中尝试这段代码,它确实可以工作。但是当我创建一个包含上述代码的 HTML 页面(在运行 apache 的树莓派上)时,它在我的 iPhone 上不起作用。

希望有人能对此有所了解,因为我无法理解它。

非常感谢。

【问题讨论】:

  • 触控设备上没有悬停事件:hover mobile OR touchedevice OR smartphone
  • 谢谢,我会读一读。
  • @mplungjan:您能否向我解释一下如何更改我的代码以根据您的链接实施解决方案?另外,您能否澄清一下为什么代码可以在我的 iPhone 上的 jsfiddle 上运行,但不能直接进入 HTML 页面?
  • 尝试在按钮上添加一个空的 onclick 处理程序 - 只需 onclick=""
  • @albertone74 如果你问 jsfiddle 和其他地方的 HTML 页面有什么区别,你必须提供两者的链接!

标签: html ios css hover mouse


【解决方案1】:

宾果!我得到了它!添加以下行就可以了:

<body ontouchstart="">

我在第一篇文章中编辑了代码以添加两个工作调整。

非常感谢 mplungjan 的热心帮助!我怎样才能接受您的建议?

【讨论】:

  • 虽然@mplugjan 提供了帮助,但他没有提到“ontouchstart”这个词。您自己找到了有效的解决方案。就接受这个吧。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-10-12
  • 2011-09-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多