divの背後にあるリンクをクリックしますか？

私は自分が見つけた問題をタイトルが適切に記述しているかどうかわかりません...divの背後にあるリンクをクリックしますか？

基本的に私は私のウェブサイトを再設計しています。私のポートフォリオのギャラリービューには、フレーム内の作品の画像のグリッドが表示されます。

フレームの上にマウスを置くと、イメージは非表示になり、タイトル、クライアント、カテゴリ、および年が表示されます。

ただし、ははすべての上に座ってクリック可能なリンクにする必要があります。しかし、上記の情報は、マークアップの下にあるにもかかわらず、イメージ上に置かれます。

これは、絶対に配置されているDIVにある上記の情報（フレームの上部に座ることができ、したがって必要である）と関係があると推測しています。

私が達成したいのは、フレーム全体をクリックすると、フレーム全体をクリックできるようにすることです.DIVによってカバーされる領域さえもそうです。

はあなたがここにアクションでサイトを見ることができる...これが不明である場合は私に知らせてください： http://www.designbyadmiral.com/

を私はいくつかのことを片付けるのに役立ちます確信しています。

出典

2009-07-29 Anonymous

これはあなたの質問に関連していません、申し訳ありません：しかし、あなたのウェブサイトへのリンクはGoogleのページランクを大幅に改善していませんか？そして、stackoverflowはこれをどうしていますか？ – anderstornvig

@anderstornvig実際には、SOはnofollow（rel = "nofollow"）を使用します。 – Nathan

ちょうど誰もがポートフォリオのロールオーバーを知っているJavaScriptのいずれかによって電源が供給されていない場合、私はサイトのこの部分にJavaScriptを避けるために、より意味のないマークアップの中から選択する必要があります。私は機能性と意味論的マークアップの両方を有効な方法で持たせる方法があることを期待していました。 –

、あなたはおそらくよ多くのコードを修正する必要があります（回避策を講じて単純な解決策が見つかりませんでした）。（！メイン以外：リンクとしてダムアンカーを使用）を使用すると、アンカーを使用するために特別な理由がない場合は休閑スニペットは動作するはずです：

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

幸運。

出典

2009-07-29 07:36:28 Nathan

jQueryプラグインはすべてのUI用に使用されているようですので、動作をカスタマイズするのは難しいかもしれません。

最も簡単な方法は、別のページに移動するために基本となるリンクのhrefを使用してオーバーレイのdivにクリックイベントを追加するために、次のようになります。これを成し遂げるために

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

出典

2009-07-29 07:12:59

私は、このマークアップで望ましい結果を達成していない、と何の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>

ない、それはあなたのページに動作しない理由を確認してください。私はあなたがそのような簡単なタスクのためにjavascriptを使用しなければならないと思うとは思わない。

出典

2009-07-29 08:11:32 Alsciende

アンカータグの内側にH3やDLを置くことができないのと同じように、アンカータグの内側にDIVを置くことができないため、このようなことに頼るかもしれませんが、私がまだいなかった理由があります。これが私が試した最初の解決策でした。 –

divの背後にあるリンクをクリックしますか？

答えて

関連する問題