链接一个div与图像悬停

我正在为我公司的网站添加一些图标，但我无法让他们链接到一个页面。链接一个div与图像悬停

我正在使用图像精灵和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>

如何获取图像链接并保持翻转？

来源

2015-01-06 user3188596

您是否指定了所有必需的脚本？ –

我认为你的代码没有问题。你能指定它吗？你的意思是什么不起作用？任何错误通知？或者点击时什么也没做？ –

这些是网站使用的一些脚本。我认为您需要导入本网站使用的必需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>

来源

2015-01-06 01:51:47

只是测试你的代码在小提琴和它工作得很好，也许你需要指定更多有关你真的面对。或者你可以通过使用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; 
}

来源

2015-01-06 09:31:24

我觉得这是你的code.It是没有问题的工作，你want.With这

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

这

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

这是JSFIDDLE

来源

2015-01-06 09:45:17

链接一个div与图像悬停

回答

相关问题