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

时间:2016-01-06 01:35:13

标签: javascript html css

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

3 个答案:

答案 0 :(得分:3)

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

&#13;
&#13;
article {
  position: relative;
  display: block;
}
article:before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1;
}
&#13;
<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>
&#13;
&#13;
&#13;

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

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

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

href将其设置为哈希:

href="#"

添加运行JS函数的onclick属性:

Onclick="video()"

对于该功能,请添加:

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

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

oncontextmenu="return false;"

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