Klicken Sie auf einen Link, der hinter einem div steht?

Ich bin mir nicht sicher, ob der Titel das Problem, das ich selbst gefunden habe, ausreichend beschreibt ...Klicken Sie auf einen Link, der hinter einem div steht?

Grundsätzlich bin ich gerade dabei, meine Website neu zu gestalten, und eines der Probleme, mit denen ich konfrontiert bin, ist das Auf der Galerieansicht meines Portfolios erhalten Sie ein Raster von Bildern für Teile meiner Arbeit in einem Rahmen.

Wenn Sie den Mauszeiger über den Rahmen halten, wird das Bild ausgeblendet und der Titel, der Kunde, die Kategorie und das Jahr angezeigt.

Allerdings sollte ein Link sein, der über alles sitzt und anklickbar ist. Die obige Information befindet sich jedoch über dem Bild, obwohl es in dem Markup darunter ist.

Ich vermute, das hat etwas damit zu tun, dass die oben genannten Informationen in einem DIV liegen, das absolut positioniert ist (was es erlaubt, oben im Rahmen zu sitzen und somit notwendig ist).

Was ich erreichen möchte ist, dass der gesamte Rahmen anklickbar ist, wenn man darüber schwebt, sogar über den Bereich, der vom DIV abgedeckt wird. Bitte lassen Sie mich wissen, ob dies unklar ist ...

Sie die Seite in Aktion hier sehen können: http://www.designbyadmiral.com/

Ich bin sicher, dass helfen, einige Dinge zu klären.

Quelle

2009-07-29 Anonymous

Dies hängt nicht mit Ihrer Frage zusammen, tut mir leid: Aber verbessert dieser Link zu Ihrer Website Ihren Seitenrang auf Google nicht drastisch? Und was ist Stackoverflow? – anderstornvig

@anderstornvig eigentlich nein, SO verwendet nofollow (rel = "nofollow"). – Nathan

Nur so jeder weiß, dass die Portfolio-Rollovers von keinem Javascript angetrieben werden und wenn ich zwischen einem weniger semantischen Markup wählen muss, um Javascript auf diesem Teil der Seite zu vermeiden, werde ich. Ich hatte nur gehofft, dass es einen Weg für mich gibt, sowohl die Funktionalität als auch das semantische Markup in einer gültigen Weise zu haben. –

Um dies getan, werden Sie wahrscheinlich Ich muss eine Menge Code ändern (da ich einen Workaround gemacht habe und keine einfache Lösung finden konnte). Wenn Sie keinen besonderen Grund haben einen Anker zu verwenden (andere als die wichtigste: die damm Anker als Links verwenden) sollte die Brache Schnipsel arbeiten:

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

Viel Glück.

Quelle

2009-07-29 07:36:28 Nathan

Sie scheinen jQuery-Plugins für alle UI-Elemente zu verwenden. Daher ist es möglicherweise schwierig, das Verhalten anzupassen.

Die einfachste Sache zu tun wäre, ein Click-Ereignis auf die überlagernde div hinzuzufügen, die die href der zugrunde liegenden Link verwendet, um eine andere Seite zu navigieren:

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

Quelle

2009-07-29 07:12:59

ich das gewünschte Ergebnis mit diesem Markup zu erreichen und keine 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>

nicht sicher, warum es nicht auf Ihrer Seite nicht funktioniert; aber ich glaube nicht, dass Sie Javascript für solch eine einfache Aufgabe verwenden sollten.

Quelle

2009-07-29 08:11:32 Alsciende

Ich könnte etwas wie das tun, aber der Grund, warum ich noch nicht war, ist, weil du kein DIV in einem Anker-Tag haben kannst, genauso wie du kein H3 oder DL in einem Anker-Tag haben kannst. Dies war die erste Lösung, die ich ausprobiert habe. –

Klicken Sie auf einen Link, der hinter einem div steht?

Antwort

Verwandte Themen