Question

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

我使用图片精灵和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>

如何将图像链接起来并保持翻转？

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

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

Answer 3

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

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

这个

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

这是JSFIDDLE

将div与图像悬停链接

3 个答案: