ウェブページの大きなクリック可能な領域

Question

私は現実から切り離しています。私は小さな見出し、少しのテキスト、多分イメージを含む要約divを持っています。などなど、ホバー：私は、その後にH4とPを変更する、素敵な箱のように見えるようにHREFのスタイルを設定したい

<div class="summary"> 
    <a href="#"> 
    <h4>Small Heading</h4> 
    <p>Small amount of text</p> 
    </a> 
</div> 

：私はリンク、このようなものにするために全体の要約のdivを希望しますしかし、そこにhrefを置くと、ブラウザが怒ります。

誰もがJavascriptに頼らずに同じ効果を達成する方法を提案できますか？それも可能ですか？

多くの感謝！

Answer 1

純粋なCSSのソリューションは、これを行うには、次のようになります。

<a href="#"> 
    <span class="header4">Small Heading</span> 
    <span class="paragraph">Small amount of text</span> 
</a> 

は、その後、あなたが見て、ヘッダーや段落をしたいかに応じてブロック要素にAを変更し、スタイルスパン：

<style> 
a { 
display: block; 
} 

span.header4 { 
display: block; 
font-size: 24px; 
font-weight: bold; 
margin: 0 0 10px 0; 
} 

span.paragraph { 
display: block; 
margin: 0 0 10px 0;  
} 
</style> 

HTML/CSS純真はそれを好まないでしょう！

Answer 2

この構文（リ​​ンク内のブロックレベルのアイテム）はHTML5で許可されています。これはすべてのブラウザでサポートする必要があります（よく分からない人はいつもこのようなことをしています）。

あなたがする必要があるすべてはあなたのDOCTYPEを変更してJavaScriptを使用していないなぜあなたは

Answer 3

:-)どのように近代的なお友達に自慢ですか？

<div class="summary" onclick="window.location.href='www.google.com';> 
    <h4>Small Heading</h4> 
    <p>Small amount of text</p> 
</div> 

javacriptを使用しないと、すべてのdiv領域をクリックできなくなります。テキストのみ。

Answer 4

a要素のスタイルをdisplay:blockに変更してみてください。

Answer 5

Andrejsが言ったことで拡大：

a.clickDiv { 
     display:block; 

    } 


    <a href="somelink.html" class="clickDiv"> 

    content 

    </a> 

Answer 6

短い答えは、 "有効な、標準、意味的に正しいHTMLではない" です。 （HTML 5はまだ標準ではなく、さまざまなブラウザで動作させるにはハックを必要とします）

無効なテクニックに頼ったり、見出しを投げ捨てたりすることで実現できますが、これはお勧めできません。

妥当な数のユーザーが、有用なものを探しているドキュメントのリンクをスキミングします。スクリーンリーダーのユーザーは良い例です。リンクテキストが大きい場合（この例のように）、この利点は失われます。

ここでは、JavaScriptを使用するのは良い解決策です（しかし、当然、JSが利用できない場合でも機能します）。

この例では、jQueryを使用します（これを正当化するにはDOMと十分に異なる）。

<div class="summary"> 
    <h4><a href='#'>Small Heading</a></h4> 
    <p>Small amount of text</p> 
</div> 

jQuery('div.summary').click(function() { 
    jQuery('a', this).click(); 
}); 

私はこれをテストしていませんが、クリックは（）を実行していない場合、私は何を期待あなたがそれを置き換えることができます。

jQuery('div.summary').click(function() { 
    document.location = jQuery('a', this).attr('href'); 
}); 

JavaScriptが使用できない場合は、見出しがまだありますクリック可能なリンク。そうであれば、全領域をクリックすることができます。あなたはとホバー効果を追加することができます

：

jQuery('div.summary').addClass('hoverable'); 

と

div.hoverable:hover { background-color: green; } 

（JSが利用できないですが、CSSがある場合は、この方法では、ホバー効果は発生しません）

Answer 7

私はあなたの目標を完全に失っているかもしれません。

サンプルコードをテキストエディタにコピーし、ブラウザ（FF 3.5、Leopard）で開いたところ、うまくいきました。私は確かにスタイリングのビットを追加しました。

これは、それが壊れている特定のブラウザですか？それとも、検証しないのですか？

divの外側にアンカータグを配置してみましたか？

Answer 8

これは、あなたが望むことをしますが、リンクオーバーレイの下にあるテキストを選択（コピー+貼り付け）できなくなります。また、IE6の：hover擬似クラス（IE6以降ではサポートしていないので）を制御することはできません。ここで

はHTMLです：

<div class="summary"> 
    <h4>Some Text</h4> 
    <p>A short description</p> 
    <a href="#" class="overlay">Anchor Text</a> 
</div> 

そして、ここでCSSです：注意点としては

<style> 
div.summary { 
position: relative; 
width: 200px; 
height: 100px; 
z-index: 10; 
} 

div.summary h4 { 
position: relative; 
font-size: 18px; 
font-weight: bold; 
} 

div.summary p { 
position: relative; 
} 

a.overlay { 
display: block; 
position: absolute; 
text-indent: -9999px; 
width: 200px; 
height: 100px; 
z-index: 30; 
top: 0; 
left: 0; 
} 
</style> 

、あなたは絶対的なように、.overlayクラスのコンテナ要素上の位置を宣言することを確認してくださいポジショニング作業。また、各z-indexの配置された要素の親要素の位置を宣言する必要があります。

問題がある場合はお知らせください。