Как сделать div ссылкой при переходе в CSS

Question

У меня есть шаблон сайта Я работаю над http://www.travenwest.com/projects/dev2, и у меня проблема с расширяющимися полями слева (это одна из моих многочисленных проблем, по крайней мере) , Я хочу, чтобы они были ссылками на другие веб-страницы, и мне было интересно, есть ли способ сделать всю ячейку ссылкой, поскольку она расширяется с 250 пикселей до 100%. В настоящее время у меня есть только «Hey» в базовой ссылке <a href="http://google.com>Hey</a>, но, как я уже сказал, я хочу, чтобы вся коробка была ссылкой, поскольку она расширяется. Кроме того, я бы предпочел сохранить его в HTML/CSS, поскольку у меня нет абсолютно никакого опыта в jQuery, JavaScript и т. Д. Спасибо.

Answer 1

Просто добавьте это в вашем CSS

#box a{  
    display:block; 
    width:100%; 
    height:80px; 
    position:relative; 
    z-index:1; 
    line-height: 80px 
} 

DEMO: http://jsfiddle.net/enve/fur5D/1/

Answer 2

Дайте ваш якорь теги следующие стили:

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

Кроме того, вы не должны использовать <center>, чтобы разместить свою текстовую ссылку. Вы должны дать вашим коробочного соответствующий class, такие как .box Таким образом, вы могли предназначаться их в файл CSS вместо того, чтобы повторить тот же CSS для нескольких ID «ы

.box { 
    width: 250px; 
    height: 80px; 
    border-bottom: 3px solid #000000; 
    border-right: 3px solid #000000; 
    transition: width 5s; 
    -webkit-transition: width 2s; 
    text-align: center; 
} 

.box:hover { 
    width: 100%; 
    border: 3px solid #000000; 
} 

Добавление text-align: center; сконцентрируется вашу ссылку текст без необходимости дополнительной разметки