Question

I have been working on building my first CSS site using divs and am having an issue with a button. While I am able to get the button to work on rollover, the link does not respond. Can somebody please advise. Thank you.

HTML:

 <div class="wrapArrow">   

 <div class="arrow" style="cursor: pointer;"><a href="../index.html" title="home"    target="_self"><span>home</span></a></div>

 </div><!-- END wrapArrow -->   

CSS:

.wrapArrow {
margin: 70px 0 0 0;
padding: 0;
width: 20px;
height: 20px;
float: right;
}


.arrow {
display: block;
width: 20px;
height: 20px;
background-image: url(../images/nav/arrows.gif);
background-repeat:  no-repeat;

}


.arrow:hover { 
  background-position: 0 -20px; }


.arrow span {
 display: none; }

Answer 1

Since your <span> is not displayed, your link has no content, so it gets collapsed to a width and height of 0, thus making it unclickable.

Why not just make the anchor itself have the arrow class?

<div class="wrapArrow">   

<a href="../index.html" title="home" target="_self" class="arrow" style="cursor: pointer;"><span>home</span></a>

</div><!-- END wrapArrow -->​