Необходимо сделать интерактивную кнопку <div>

Пройдите эту ссылку и обратите внимание на решение, данное "thepeer" : qaru.site/info/15032/...

Мне трудно понять его решение. Позвольте мне проиллюстрировать пример веб-страницы, которую я пытаюсь создать. Я использую HTML5 для создания "кнопок". Теперь, поскольку эти кнопки на самом деле являются объектами DIV, мне почему-то нужно сделать их "интерактивными", что приведет зрителя к другой странице, и это тоже, не сделав "ссылку" видимой. Объект div должен действовать как кнопка, а я не намерен "включать" строку с гипертекстовым текстом внутри кнопки.

Я думаю, что решение, данное "thepeer" , делает именно это, но я не могу понять его решение и реализовать его. Возможно, очень маленький пример принесет мне пользу.

Предположим, что это кнопка, которую я хочу сделать:

 <div id="music" class="nav">Music I Like <span id="hyperspan"><a href="Music.html"></a></span></div>

И здесь CSS как "thepeer" предложил:

.hyperspan
{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:1;
}

Теперь, очевидно, я неправильно понял его решение, и, следовательно, моя попытка выше неверна. Я не хочу прибегать к javascript, поэтому, пожалуйста, помогите мне! Извините за мою noobish-ness.

Ответ 1

На этой странице размещено два решения. Тот, у кого меньше голосов, я бы порекомендовал, если это возможно.

Если вы используете HTML5, то вполне корректно положить div внутри a. Пока div не содержит также некоторые другие элементы, такие как другие теги ссылок.

<a href="Music.html">
  <div id="music" class="nav">
    Music I Like
  </div>
</a>

Решение, которое вы путаете, фактически делает ссылку такой же большой, как и ее контейнер div. Чтобы заставить его работать в вашем примере, вам просто нужно добавить position: relative в свой div. У вас также есть небольшая синтаксическая ошибка, которая заключается в том, что вы дали span a class вместо id. Вы также должны поместить свой интервал в ссылку, потому что это то, что пользователь нажимает. Я не думаю, что вам нужен z-index вообще из этого примера.

div { position: relative; }
.hyperspan {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}

<div id="music" class="nav">Music I Like 
    <a href="http://www.google.com"> 
        <span class="hyperspan"></span>
    </a>   
</div>

http://jsfiddle.net/rBKXM/9

Когда вы даете absolute позиционирование элементу, он основывает свое местоположение и размер после того, как первый родитель обнаруживает, что он расположен относительно. Если нет, то он использует документ. Добавляя relative к родительскому div, вы указываете, что диапазон должен быть таким большим.

Ответ 2

Просто используйте <a> самостоятельно, установите его на display: block; и установите width и height. Избавьтесь от <span> и <div>. Это семантический способ сделать это. Нет необходимости обертывать вещи в <divs> (или любой элемент) для макета. Это для CSS.

Демо: http://jsfiddle.net/ThinkingStiff/89Enq/

HTML:

<a id="music" href="Music.html">Music I Like</a>

CSS

#music {
    background-color: black;
    color: white;
    display: block;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
    width: 100px;
    text-align: center;
}

Вывод: