En cliquant sur un lien qui se trouve derrière un div?

Je ne suis pas sûr que le titre décrit adéquatement le problème que je me suis trouvé avec ...En cliquant sur un lien qui se trouve derrière un div?

Fondamentalement, je suis en train de refonte de mon site Web et l'un des problèmes que j'ai rencontrés est que sur la vue de la galerie de mon portfolio, vous obtenez une grille d'images pour des morceaux de mon travail à l'intérieur d'un cadre.

Lorsque vous passez la souris sur le cadre, l'image est masquée et le titre, le client, la catégorie et l'année sont affichés.

Cependant, il devrait être un lien qui se trouve sur tout et est cliquable. Cependant, les informations ci-dessus se trouvent sur l'image, même si elle est inférieure dans le balisage.

Je suppose que cela a quelque chose à voir avec l'information ci-dessus résidant dans un DIV qui est positionné absolument (ce qui lui permet de s'asseoir en haut de la trame et est donc nécessaire).

Ce que je voudrais accomplir est d'avoir le cadre entier être cliquable quand vous le survolez, même la zone couverte par le DIV. S'il vous plaît laissez-moi savoir si cela est peu claire ...

Vous pouvez voir le site en action ici: http://www.designbyadmiral.com/

Je suis sûr que cela aidera à effacer certaines choses.

Source

2009-07-29 Anonymous

Ce n'est pas lié à votre question, désolé: Mais ce lien vers votre site Web n'améliore-t-il pas votre classement de page sur google radicalement? Et quel est le point de vue de stackoverflow? – anderstornvig

@anderstornvig effectivement non, SO utilise nofollow (rel = "nofollow"). – Nathan

Juste pour que tout le monde sache que les rollovers de portefeuille ne sont pas alimentés par un javascript et si je dois choisir entre un balisage moins sémantique afin d'éviter le javascript sur cette partie du site, je le ferai. J'espérais juste qu'il y avait un moyen pour moi d'avoir à la fois la fonctionnalité et le balisage sémantique d'une manière qui était valide. –

Pour obtenir ce fait, vous aurez probablement besoin de modifier beaucoup de code (depuis que j'ai fait une solution de contournement et que je n'ai pas trouvé de solution simple). Si vous n'avez pas une raison particulière d'utiliser une ancre (autre que le principal: utiliser les points d'ancrage Damm sous forme de liens) l'extrait de mise en jachère devrait fonctionner:

$(".project").each(function(){ 
    var url = $(this).children('.project-link').attr('href'); 
    $(this).css('cursor', 'pointer'); 
    $(this).click(function(){ 
     window.location = url; 
    }); 
});

Bonne chance.

Source

2009-07-29 07:36:28 Nathan

Vous semblez utiliser des plugins jQuery pour toutes les fonctionnalités de l'interface utilisateur, il peut donc être difficile de personnaliser le comportement.

La chose la plus simple à faire serait d'ajouter un événement de clic au div superposée qui utilise le href du lien sous-jacent pour naviguer vers une autre page:

$("#topdiv").click(function() { 
    window.location = $("#originallink").attr("href"); 
});

Source

2009-07-29 07:12:59

Je suis obtenir le résultat souhaité avec ce balisage, et pas javascript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
      "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
ul { list-style: none } 
li { float: left } 
li a { display: block; position: relative; text-decoration: none; color: #5e5d56; } 
li a img, li a div { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: 13px; border: none; } 
li a img { z-index: 2; } 
li a:hover img { display: none } 
li a div { background: #b8b7af; padding: 20px; z-index: 1; } 
</style> 
</head> 
<body> 
<ul> 
    <li> 
     <a href="http://www.designbyadmiral.com/project/maclure-library-site-redesign" style="width:458px;height:523px"> 
      <img width="432" height="497" alt="Maclure Library site redesign screenshot" src="http://www.designbyadmiral.com/image/1/432/0/uploads/maclure-2-screenshot-1.jpeg"/> 
      <div class="project-information"> 
     <h3>Maclure Library Site Redesign</h3> 
       <dl> 
        <dt>Client</dt> 
        <dd>Maclure Library</dd> 
        <dt>Year</dt> 
        <dd>2009</dd> 
        <dt>Category</dt> 
        <dd>Web</dd> 
       </dl> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="http://www.designbyadmiral.com/project/maclure-library-site-redesign" style="width:458px;height:499px"> 
      <img width="432" height="473" alt="Infamy homepage screenshot" src="http://www.designbyadmiral.com/image/1/432/0/uploads/infamy-website-1-homepage.jpeg"/> 
      <div class="project-information"> 
     <h3>Infamy Website Design and Development</h3> 
       <dl> 
        <dt>Client</dt> 
        <dd>Schadenfreude Productions Ltd.</dd> 
        <dt>Year</dt> 
        <dd>2008</dd> 
        <dt>Category</dt> 
        <dd>Web</dd> 
       </dl> 
      </div> 
     </a> 
    </li> 
</ul> 
</body> 
</html>

Je ne sais pas pourquoi il ne fonctionne pas sur votre page; mais je ne pense pas que vous devriez utiliser javascript pour une tâche aussi simple.

Source

2009-07-29 08:11:32 Alsciende

Je pourrais faire quelque chose comme ça mais la raison pour laquelle je ne l'avais pas encore est parce que vous ne pouvez pas avoir un DIV dans une balise d'ancrage, tout comme vous ne pouvez pas avoir de H3 ou DL dans une balise d'ancrage. C'était la première solution que j'ai essayée. –

En cliquant sur un lien qui se trouve derrière un div?

Répondre

Questions connexes