1. Accueil
  2. Question et réponse
  3. Transforme Div en Link

Transforme Div en Link

2010-01-25 6 views
4

J'essaye de transformer un div en un lien. Le code ci-dessous fonctionne bien dans firefox mais dans IE le pointeur de la souris ne réagit pas au lien. Y a-t-il un moyen de contourner ceci? Merci.Transforme Div en Link

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

Source

2010-01-25 usertest

Répondre

1

Je pense que IE répond réellement correctement dans ce cas. Un div est un élément de niveau bloc; il ne devrait donc pas être contenu dans un élément inline tel que, par exemple, un a. Si vous utilisez un span (à la place de div) cela fonctionne à la fois dans IE et Firefox?

Si vous voulez faire regarder comme un lien (en termes du curseur), vous pouvez utiliser:

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

Source

2010-01-25 17:50:32

0

Essayez:

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

Source

2010-01-25 17:51:12

8

Pourquoi avez-vous voulez-vous utiliser un div en tant que lien?

Ne pouvez-vous pas afficher votre lien en tant que bloc?

a{ 
    display:block; 
}

Ou utiliser un span au lieu d'un div.

Source

2010-01-25 17:51:49

4

Comme Welbog a noté, les éléments <a> et <div> doivent être inversées:

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

Ensuite, dans votre style, vous pouvez faire la balise <a> ÉTENDU pour remplir toute la div:

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

Source

2010-01-25 17:52:08 AaronSieb

0

Cette est la meilleure façon de le faire comme utilisé sur le site Web de la BBC et le Guardian:

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

Heres le code 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>

Heres le 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; 
}

Source

2016-07-06 12:34:11 jojojohn

Questions connexes

 Questions connexes