I'm struggling with a simple question and need some help.
#tps_block {
height: 45px;
width: 940px;
}
#tps_point1 {
width: 351px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point1:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 -45px no-repeat;
}
#tps_point2 {
width: 284px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point2:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px -45px no-repeat;
}
#tps_point3 {
width: 305px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point3:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px -45px no-repeat;
}<div id="tps_block">
<div id="tps_point1"><a href="#">Point 1</a>
</div>
<div id="tps_point2"><a href="#">Point 2</a>
</div>
<div id="tps_point3"><a href="#">Point 3</a>
</div>
</div>There are three images displayed side by side, each changing when hovered over. The images are also links that will take the user to another page upon clicking.
The hover effect is working fine, but I can't seem to get the linking to function properly.
If anyone could provide assistance, it would be greatly appreciated.
JSFiddle: http://jsfiddle.net/ahmadka/Fjmnt/