Почему гиперссылка не работает на части моего div?

Question

http://geodit.com:8000/

Если вы попытаетесь щелкнуть между «Копье Святого Окленда» и описанием, вы заметите, что якорь никуда вас не приведет. Это потому, что между ними есть отступы.

Как заставить гиперссылку работать, когда пользователь нажимает между текстом?

Answer 1

Попробуйте добавить отступы к элементам a вместо элементов div.

Answer 2

Ваш код излишне сложен.Например, вам не нужно оборачивать все (например, каждую ссылку) в DIV (или наоборот).Просто стилизуйте ссылку напрямую, возможно, установив ее стиль display на block, чтобы она работала как div.

Если вы объедините обе ссылки в одну, то ваша проблема исчезнет, ​​и вам не понадобится«подделать» ссылки с помощью cursor: pointer.

Вот пример того, насколько простым может быть ваш HTML:

<div class="awallpost grid_doc_holder sub" data-image="http://s3.amazonaws.com/fabletest/7cgeq8hkdt"> 
  <a href="/d/1339" class="trans_caption "> 
    See the sun whispering the light of our days from last summer...
  </a> 

  <div class="trans_caption_over"> 
     <a href="#" data-holdclass="positive_hold" data-content_id="1339" data-score="1" class="upvote_button positive overlaybutton" name=""><img src="/media/img/brightmix/star.png"> Great Find!</a> 

     <a href="/d/1339" class="extras"> 
       <em><img src="/media/img/brightmix/placedot2_white.png" align="texttop" width="12" height="auto">  Spear St. Oakland, 94107</em> 
       <span>Hey it&#39;s weekend! Whohoooo :O) Made a few new photos on my favorite heathland just outside the city, the sunset ...</span>
     </a> 
   </div> 

   <div class="title_text_only"> 
     See the sun whispering the light of our days from last summer...
   </div> 
   <div class="desc_text_only"> 
     Hey it&#39;s weekend! Whohoooo :O) Made a few new photos on my favorite heathland just outside the city, the sunset was so gorgeous and soft just perfect for my &amp;amp;quot;cream ...
   </div> 
</div> 

Answer 3

Я полагаю, что вы хотите просто поместить свой div (или Divs) в тег A, что сделает все это кликабельным.

Answer 4

У вас нет связи между текстом.У вас есть две ссылки.Что сбивает с толку, так это

.grid_doc_holder {
    cursor: pointer;
    text-align: center;
}

, который показывает руку, когда вы не находитесь над ссылками. Вы могли бы рассмотреть возможность сделать внешний контейнер кликабельным