将 div 与图像悬停链接答案

【问题标题】：Linking a div with an image hover将 div 与图像悬停链接
【发布时间】：2015-03-03 15:48:12
【问题描述】：

我正在为我公司的网站添加一些图标，但无法让它们链接到页面。

我正在使用图像精灵和 CSS 来更改悬停时的图像。如果您click here and look under Services We Offer，您可以看到图像悬停。

我正在使用 div 来执行此操作，代码如下：

<div class="video-box"></div>

在我的 CSS 中：

.video-box {
width: 184px; 
height: 222px; 
background: url("http://bluestarmultimedia.tv/wp-content/uploads/2015/01/rollover-video-2.png") no-repeat scroll left top transparent; 
display: block;
}
.video-box:hover {background-position: -184px 0px;}

当我添加这样的链接时，它不起作用。

<a href="http://google.com"><div class="video-box"></div></a>

如何让图像链接并保持滚动？

【问题讨论】：

您是否指定了所有必需的脚本？
我认为你的代码没有问题。你能指定吗？你说它不起作用是什么意思？有错误提示吗？还是点击时什么也没做？

标签： html css hyperlink hover

【解决方案1】：

这些是网站使用的一些脚本。我认为您将需要导入本网站中使用的所需 JQuery 脚本。

<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script> 
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.tools.min.js?ver=4.6.5'></script> 
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=4.6.5'></script> 
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/themes/x/framework/js/dist/site/x-head.min.js'></script> 
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/x-shortcodes/js/dist/site/x-shortcodes-head.min.js'></script>

【讨论】：

【解决方案2】：

只需在 Fiddle 中测试您的代码，它就可以正常工作，也许您需要详细说明您真正面临的问题。或者你可以使用span和z-index来制作带有链接功能的div。

HTML

<div class="video-box">
    <a href="http://tw.yahoo.com"><span></span></a>
</div>

更多 CSS

.video-box span {
  position:absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

【讨论】：

【解决方案3】：

我认为您的代码没有问题。它可以按您的意愿工作。有了这个

<div class="video-box"></div>

还有这个

<a href="http://google.com"><div class="video-box"></div></a>

这里是JSFIDDLE

【讨论】：