Превратите Div в ссылку - PullRequest
Новая
       3

Превратите Div в ссылку

5 голосов
/ 25 января 2010

Я пытаюсь превратить div в ссылку. Приведенный ниже код отлично работает в Firefox, но в IE указатель мыши не реагирует на ссылку. Это можно обойти? Спасибо. 

<html>
<head>
<style type="text/css">
.test{
    width:100%;
    height:100px;
    background:#666666;
}
</style>
</head>

<body>
<a href="http://www.google.com">
    <div class="test">
        kjlkjlkjkljl
    </div>
</a>

</body>
</html>

Ответы [ 6 ]

8 голосов
/ 25 января 2010

Почему вы хотите использовать div в качестве ссылки?

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

a{
  display:block;
}

Или используйте span вместо div.

4 голосов
/ 25 января 2010

Как отметил Уэлбог, элементы <a> и <div> следует поменять местами: 

<div class="test">
    <a href="http://www.google.com">
        Lorem ipsum
    </a>
</div>

Затем в своем стиле вы можете расширить тег <a>, чтобы заполнить весь div: 

.test a {
    display: block;
    width: 100%;
    height: 100%;
}
1 голос
/ 25 января 2010

Я думаю, что IE действительно правильно реагирует в этом случае.

A div - элемент уровня блока; поэтому он не должен содержаться внутри встроенного элемента, такого как, например, a. Если вы используете span (вместо div), это работает как в IE, так и в Firefox?

Если вы хотите, чтобы он выглядел как ссылка (в терминах курсора), то вы можете использовать: 

a > div, /* please change your mark-up to the following */
a > span {cursor: hand; /* for earlier versions of IE */
          cursor: pointer; /* for, I think, IE 7+ and FF etc. */
}
0 голосов
/ 06 июля 2016

Это лучший способ сделать это, как используется на сайте BBC и в Guardian:

http://codepen.io/IschaGast/pen/Qjxpxo

вот HTML 

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

вот CSS 

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}


.highlight {
  background-color: #ddd;
}
0 голосов
/ 25 января 2010

Попробуйте: 

.test{
    width:100%;
    height:100px;
    background:#666666;
    cursor: pointer;
}
0 голосов
/ 25 января 2010

Вы можете использовать CSS свойство Cursor. http://www.w3schools.com/CSS/pr_class_cursor.asp

Но ваш HTML-код неверен. Вы не можете поместить <div> внутри тега <a> таким образом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...