CSSロールオーバー動作していますがリンクがありません

Question

divを使用して最初のCSSサイトを構築する作業をしていて、ボタンに問題があります。私はロールオーバーでボタンを動作させることができますが、リンクは反応しません。誰か助言してもらえますか？ありがとうございました。

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

あなた<span>が表示されていないので、あなたのリンクはコンテンツがありませんので、それが0の幅と高さに崩壊します、したがって、それはunclickable作ります。

アンカーそのものをarrowクラスにするだけではどうですか？

<div class="wrapArrow"> 

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

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

Answer 2

あなたは

.arrow span { 
    display: none; 
} 

を取り除くために必要があるように見えますがする必要がありますどのような理由がありますか？ displayをnoneに設定すると、リンクが機能するために必要なクリック可能な要素が隠れてしまいます。

Answer 3

.arrow aは0 x 0 px

が、それは本当にハードにクリックできるようになります。私は信じています。

試してみてください。

 .arrow a { 
      width: 100%; 
      height: 100%; 
      display: block; 
     }