웹 페이지의 큰 클릭 가능 영역

Question

현실에서 벗어나는 동안 실례합니다. 작은 제목, 약간의 텍스트, 아마도 이미지가 포함 된 요약 div가 있습니다. , 등 등을 가져 : 그때 href를 멋진 상자처럼 보이는 스타일을 것

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

H4와 P에 변경 :이 같은 링크, 무언가로 전체 요약 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에서 허용됩니다. 이는 모든 브라우저에서 지원되어야합니다 (잘 모르는 사람들은 항상이 작업을 수행했기 때문에).

당신이해야 할 모든 당신이

Answer 3

은 왜 자바 스크립트를 사용 :-) 얼마나 현대 친구에게 자랑 다음 문서 타입을 변경하고인가? 모든 사업부 영역 클릭을받지 않습니다 자바 스크립트 아니오

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

. 텍스트 만.

Answer 4

a 요소의 스타일을 display:block으로 변경해보십시오.

Answer 5

안드레이는 말에 확장 :

a.clickDiv { 
     display:block; 

    } 


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

    content 

    </a> 

Answer 6

짧은 대답은 "유효하지 않은, 표준, 의미 적으로 올바른 HTML로"입니다. (HTML 5는 아직 표준이 아니며 여러 브라우저에서 제대로 작동하려면 해킹이 필요합니다.)

잘못된 기술을 사용하거나 표제를 버리면 얻을 수 있지만 이는 좋지 않습니다.

합리적인 수의 사용자가 유용한 문서를 찾는 문서에서 링크를 탈락시킵니다. 스크린 리더 사용자가 좋은 예입니다. 링크 텍스트가 큰 경우 (예를 들어있는 것처럼)이 이점이 손실됩니다.

JavaScript를 사용하면 좋은 해결책입니다 (하지만 JS를 사용할 수없는 경우에도 자연스럽게 작동합니다).

이 예제에서는 jQuery를 사용하겠다. (DOM을 정당화하기 위해 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'); 
}); 

자바 스크립트를 사용할 수없는 경우는, 제목은 아직입니다 클릭 가능한 링크. 그럴 경우 전체 영역을 클릭 할 수 있습니다.

당신이 호버 효과를 추가 할 수 있습니다 :

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

및

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

Answer 7

I을 (JS를 사용할 수없는 있지만 CSS 인 경우 호버 효과가 발생하지 않습니다 이런 식으로) 모두 목표를 달성하지 못했을 수 있습니다.

예제 코드를 텍스트 편집기로 복사하여 브라우저 (Leopard의 FF 3.5)에서 열면 정상적으로 작동합니다. 나는 심지어 약간의 스타일을 확실히하기 위해 덧붙였다.

그래서 특정 브라우저에서 작동하지 않습니까? 아니면 유효성을 검사하지 않는 것입니까?

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- 인덱스 위치 요소의 부모 요소에서 위치를 선언해야합니다.

문제가 있으면 알려주세요.