CSS Rollover работает, но ссылка не - PullRequest
Новая
       6

CSS Rollover работает, но ссылка не

0 голосов
/ 22 марта 2012

Я работал над созданием моего первого сайта CSS с использованием divs и у меня возникла проблема с кнопкой.Пока я могу заставить кнопку работать на ролловере, ссылка не отвечает.Может кто-нибудь, пожалуйста, посоветуйте.Спасибо.

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

Ответы [ 3 ]

1 голос
/ 22 марта 2012

.arrow a - это 0 x 0 px

Делает это действительно трудно щелкнуть. Поверьте мне, я пытался.

Попробуйте: 

        .arrow a {
            width: 100%;
            height: 100%;
            display: block;
        }
1 голос
/ 22 марта 2012

Поскольку ваша <span> не отображается, ваша ссылка не имеет содержимого, поэтому она сворачивается до ширины и высоты 0, что делает ее неактивной.

Почему бы просто не сделать так, чтобы сам якорь имел класс arrow? 

<div class="wrapArrow">   

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

</div><!-- END wrapArrow -->​
1 голос
/ 22 марта 2012

Похоже, вам нужно избавиться от 

.arrow span {
    display: none;
}

Есть ли какая-то причина, которая должна быть там?Если для параметра display установлено значение none, вы скрываете кликабельный элемент, необходимый для работы ссылки.

...