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

Question

当我将鼠标悬停在图像上时，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函数。 该功能几乎可以做同样的事情。 将原始链接存储在变量中。

Answer 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> 

Answer 2

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

 <video controls="" autoplay="" name="media" oncontextmenu="return false"><source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" oncontextmenu="return false"></video> 

Answer 3

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

href设置为哈希：

href="#"

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

Onclick="video()"

对于函数，添加以下内容：

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

要禁用视频，请右键单击菜单。 我所做的就是将其添加到body标签：

oncontextmenu="return false;"

对我来说幸运的是，我可以右键单击禁用整个页面。 由于我没有视频标签，因此无法在视频标签上使用它。