Linking a div with an image hover

Question

I'm working on adding some icons to my company's website, but I'm having trouble getting them to link to a page.

I'm using an image sprite and CSS to change the image on hover. If you click here and look under Services We Offer you can see the image hover.

I'm using a div to do this, with this code:

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

And in my 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;}

When I add a link like this, it doesn't work.

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

How can I get the images to link and keep the roll over?

I think there is no problem with your code. Can you specify it? What do you mean by it doesn't work? Any error notification? Or it did nothing when clicked? — Hendry Tanaka, Jan 06 '15 at 01:55

score 0 · Answer 1 · answered Jan 06 '15 at 01:51

These are some of the scripts that the website use. I think you will need to import the required JQuery scripts that are used in this website.

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

score 0 · Answer 2 · answered Jan 06 '15 at 09:31

Just test your code in Fiddle and it worked fine, maybe you need to specify more about what you really face with. Or you could make div with link function by using span and z-index.

HTML

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

more CSS

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

score 0 · Answer 3 · answered Jan 06 '15 at 09:45

0

I think there is no problem with your code.It is working as you want.With This

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

And this

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

Here is JSFIDDLE

answered Jan 06 '15 at 09:45

Istiak Tridip

199
1
14

Linking a div with an image hover

3 Answers3