HTML-ссылка поверх текста

Мне нужно добавить ссылку на весь div, который содержит еще несколько div. Выглядит так:

div.top
{
  width: 150px;
  height: 150px;
  position: relative;
}

a.link
{
  width: 150px;
  height: 150px;
  position: absolute;
  top: 0;
}

<div class="top">
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>

  <a class="link" href="http://something"></a>
</div>

Поэтому я поместил ссылку внутрь и сделал ее размером с верхний div. Все отлично работает в Firefox, Safari и Chrome. В IE и Opera, когда я навожу курсор мыши на эту область, а также на текст, курсор меняется на курсор выбора, а не на руку (что означает отсутствие ссылки). Всякий раз, когда я перемещаю курсор за пределы текста, ссылка снова становится доступной.

Как сделать так, чтобы ссылка полностью «закрывала» текст? Я попытался добавить z-индекс:

div.top
{
  z-index: 0;
}

a.link
{
  z-index: 1;
}

не помогает.

Любые идеи?


html css anchor
person user50855    schedule 04.05.2010    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ewww, пару вещей, которые я хотел бы предложить:

  1. Используйте сценарии, чтобы изменить страницу по нажатию мыши (не по щелчку, это раздражает) и установите внешний раздел так, чтобы он имел курсор-указатель (примечание: не рука).

  2. Оберните все в якорь и используйте промежутки внутри него, чтобы делать разные вещи с текстом (помните, что вы не должны иметь элементы блочного уровня внутри якоря).

То, что вы делаете, никогда не будет работать одинаково во всех браузерах.

person animuson    schedule 04.05.2010

arrow_upward
0
arrow_downward

Я предлагаю вам лучше поместить событие onclick в верхний элемент div с js, который перенаправляет куда-то, что вам нужно. Вы также можете изменить курсор мыши на руку с помощью css.

<div style="cursor:pointer;cursor:hand" class="top" onclick="location.href='http://something'">
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>
</div>
person Draco Ater    schedule 04.05.2010