HTML-ссылка над текстом - PullRequest
Новая
       10

HTML-ссылка над текстом

1 голос
/ 04 мая 2010

Мне нужно добавить ссылку на весь 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. Everythign отлично работает в Firefox, Safari и Chrome. В IE и Opera при наведении курсора мыши на эту область, но также и на текст, курсор меняется на курсор выделения, а не на руку (то есть на ссылку нет). Всякий раз, когда я убираю курсор с текста, ссылка снова становится доступной.

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

div.top
{
  z-index: 0;
}

a.link
{
  z-index: 1;
}

не помогает.

Есть идеи?

Ответы [ 3 ]

1 голос
/ 04 мая 2010 
span.text1
{
    float: left;
}
span.text2
{
    clear: left;
    float: left;
}
a.link
{       
}


<a class="link" href="http://something">
    <span class="text1">Text 1</span>
    <span class="text2">Text 2</span>
</a>
1 голос
/ 04 мая 2010

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

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

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

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

0 голосов
/ 04 мая 2010

Я полагаю, вам лучше поместить событие 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>
...