将鼠标悬停在链接上时如何隐藏 URL？答案

【问题标题】：How to hide the URL when hover over a link?将鼠标悬停在链接上时如何隐藏 URL？
【发布时间】：2016-01-06 01:35:13
【问题描述】：

当我将鼠标悬停在图像上时，href 不会显示原始视频的链接吗？（网络浏览器左下角）？

另外，我怎样才能禁用右键单击，这样他们就不会获得视频选项。

<article>
  <a class="thumbnail" href="http://vjs.zencdn.net/v/oceans.mp4">
    <img src="http://i.livescience.com/images/i/000/026/853/iFF/ocean-waves-beach.jpg?1336055104" alt="" />
  </a>
</article>

由于没有使用视频标签，我不确定这一点。

我的想法是，href 可能会切换一个 javascript 函数。该功能几乎可以做同样的事情。将原始链接存储在变量中。

【问题讨论】：

寻找stackoverflow.com/a/9851396/1980659

标签： javascript html css

【解决方案1】：

仅使用 CSS，您可以在链接顶部设置一个图层。下面是一个使用伪元素:before + 一些position 技巧的例子。

article {
  position: relative;
  display: block;
}
article:before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1;
}

<article>
  <a class="thumbnail" href="http://vjs.zencdn.net/v/oceans.mp4">
    <img src="http://i.livescience.com/images/i/000/026/853/iFF/ocean-waves-beach.jpg?1336055104" alt="" />
  </a>
</article>

使用 JavaScript，请尝试以下方法。

<article>
  <a class="thumbnail" href="javascript:void(0)" onclick="javascript:location.href='http://vjs.zencdn.net/v/oceans.mp4'">
    <img src="http://i.livescience.com/images/i/000/026/853/iFF/ocean-waves-beach.jpg?1336055104" alt="" />
  </a>
</article>

【讨论】：

【解决方案2】：

您可以通过在视频中添加oncontextmenu="return false" 来禁用右键单击。

&lt;video controls="" autoplay="" name="media" oncontextmenu="return false"&gt;&lt;source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" oncontextmenu="return false"&gt;&lt;/video&gt;

【讨论】：

在图像上禁用它。不是视频一旦显示。我需要禁用视频的右键单击。
然后只需将其添加到视频中，效果也不错;) - 添加了一个新的 sn-p。您也可以将其添加到整个身体中。这将防止人们右键单击任何地方并打开检查菜单。但是，始终可以查看您网站的源代码。

【解决方案3】：

感谢大家的帮助。我得到了解决方案。

href 将其设置为哈希：

href="#"

添加一个运行 JS 函数的 onclick 属性：

Onclick="video()"

为函数添加：

Function video() {
   window.location.href ='VIDEO LINK HERE';
}

禁用视频右键菜单。我所做的只是将其添加到正文标签中：

oncontextmenu="return false;"

幸运的是，我可以禁用整个页面的右键单击。因为我没有视频标签，所以我不能在视频标签上使用它。

【讨论】：