Нужно сделать кликабельную кнопку <div>

Question

Пожалуйста, пройдите по этой ссылке и обратите внимание на решение, данное "thepeer": https://stackoverflow.com/a/3494108

У меня проблемы с пониманием его решения. Позвольте мне проиллюстрировать это примером веб-страницы, которую я пытаюсь создать. Я использую 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, поэтому, пожалуйста, помогите мне! Извините за мою нубишность.

Answer 1

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

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

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

Решение, которое вас смущает, фактически делает ссылку такой же большой, как ее контейнерный div.Чтобы это работало в вашем примере, вам просто нужно добавить position: relative к вашему div.У вас также есть небольшая синтаксическая ошибка, которая заключается в том, что вы дали диапазону класс вместо идентификатора.Вы также должны поместить свой промежуток внутри ссылки, потому что это то, на что нажимает пользователь.Я не думаю, что вам нужно 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, вы указываете, что span будет только таким большим.

Answer 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;
}

Выход: