Только текст в текстовом поле можно щелкнуть

Question

На веб-странице У меня есть список миниатюр со ссылками на них сверху. Они обернуты тегом ссылок и доступны для просмотра. Тем не менее, в коробках ссылок поверх них, которые имеют слегка прозрачный фон, доступен только текст, а не весь блок.

Это HTML код для одного набора пиктограмм и ссылка коробки:

<article class="recent-post-item"> 
    <h2> 
     <a href="link/to/somewhere" title="Permanent link to Something">Something</a> 
    </h2> 
    <a href="link/to/somewhere" title="Something" class="thumb"> 
     <img src="someimage.png" alt="Something" width="248" height="125" /> 
    </a> 
</article> 

И это соответствующая таблица стилей:

#column-2 .recent-post-item { 
    height: 127px; 
    width: 250px; 
    position: relative; 
    border: none; 
} 
#column-2 .thumb { 
    margin: 0; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
#column-2 h2 { 
    font-size: 22px; 
    background-color:rgba(255,255,255,0.6); 
    padding: 5px 4px; 
    margin: 0; 
    position: absolute; 
    z-index: 1; 
    bottom: 1px; 
    left: 1px; 
    right: 1px; 
} 

И Heres рабочий сайт, показывающий проблему: http://fuckthepony.dk/wordpress/ (эскизы, о которых я говорю, это те, что находятся в средней колонке)

Некоторые люди сказали мне, что они не испытывают проблемы. Я тестировал в Linux как Opera, Chrome, так и Firefox, и проблема остается постоянной во всех этих браузерах.

Answer 1

Я согласен с комментариями выше, но, чтобы сделать весь прозрачный блок кликабельным вам нужно будет также принимать отступы прочь h2 и добавить отступы к а вместо этого.

#column-2 h2 { 
    padding: 0; 
} 

#column-2 h2 a { 
    display: block; 
    padding: 5px 4px; 
} 

Answer 2

Это просто потому, что элемент не отображен: блок по умолчанию.

Просто добавьте эту маленькую строку:

#column-2 h2 a { display:block; } 

Answer 3

Это происходит потому, что a элементов являются встроенными элементами, поэтому они не принимают ширину всех родителей доступны. Вы можете добавить это правило в ваш CSS:

#column-2 h2 a { 
    display: block; 
}