Biegen Sie in Links Div

Ich versuche einen div in einen link. Der folgende code funktioniert in firefox, aber in IE der Mauszeiger reagiert nicht mehr auf den link. Gibt es eine Möglichkeit, um dieses? Danke.

<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>

InformationsquelleAutor usertest | 2010-01-25

  1. 1

    Denke ich, IE eigentlich richtig reagiert in diesem Fall.

    Einen div ist ein block-level-element; also sollte es nicht enthalten sein innerhalb einer inline-element wie zum Beispiel ein a. Wenn Sie eine span (statt div) funktioniert dies im IE und Firefox?

    Wenn Sie wollen, um es Aussehen wie ein link (im Sinne des Cursors), dann möchten Sie vielleicht zu verwenden:

    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. */
}

    InformationsquelleAutor David Thomas

  2. 8

    Warum wollen Sie verwenden eine div als link?

    Können Sie nicht nur zeigen Sie Ihre link-block?

    a{
  display:block;
}

    Oder verwenden Sie eine span statt einer div.

    InformationsquelleAutor Guillaume Flandre

  3. 4

    Als Welbog hingewiesen, die <a> und <div> Elemente sollte rückgängig gemacht werden:

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

    Dann in Ihrem Stil, machen Sie die <a> tag zu erweitern, um den gesamten div:

    .test a {
    display: block;
    width: 100%;
    height: 100%;
}

    InformationsquelleAutor AaronSieb

  4. 0

    Können Sie die CSS-Eigenschaft Cursor.
    http://www.w3schools.com/CSS/pr_class_cursor.asp

    Aber, dein HTML wird nicht korrekt. Sie können eine <div> innerhalb einer <a> tag so.

    InformationsquelleAutor jgallant

  5. 0

    Versuchen:

    .test{
    width:100%;
    height:100px;
    background:#666666;
    cursor: pointer;
}

    InformationsquelleAutor Felix Kling

  6. 0

    Dies ist der beste Weg, es zu tun, die auf der BBC und der Guardian:

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

    hier ist der 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>

    hier ist der 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;
}

    InformationsquelleAutor jojojohn

Schreibe einen Kommentar