CSS 인라인 요소가 호버링을 방지합니다.

Question

다음 마크 업을 사용하여 두 개의 플로팅 텍스트 오버레이 (머리글과 요약 텍스트 용 이미지)를 만듭니다. 그것은 내가 바라는 방식으로 렌더링하고 있는데, 헤드 라인 & 요약뿐만 아니라 전체 이미지를 사용하여 '요약'의 끝까지 '헤드 라인'오른쪽의 영역을 제외하고 링크에 액세스 할 수 있습니다. 이것은 모든 브라우저에서 발생합니다 (IE9 이하 제외). 왜 그런 생각을하고 어떻게 해결할 수 있습니까?

HTML :

<div class="image"> 
    <a href="Default.aspx"><img src="Assets/Images/Picture.jpg" alt="Picture" /></a> 
    <div class="overlay"> 
     <a href="Default.aspx" class="headline">Headline</a> 
     <a href="Default.aspx" class="summary">Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.</a> 
    </div> 
</div> 

CSS :

body { 
    border: 0; 
    color: #5B6064; 
    font-family: Helvetica, Arial, Sans-Serif; 
    font-size: .75em; 
    line-height: 1.6em; 
    margin: 0; 
    padding: 0; 
    background-color: #a5a5a5; 
} 
a { 
    text-decoration: none; 
    color: #5B6064; 
} 
a:visited { 
    text-decoration: none; 
} 
img { 
    border: 0; 
} 
.image { 
    position: relative; 
    width: 100%; 
/* For IE6 */ 
    display: block; 
    overflow: hidden; 
} 
.overlay { 
    position: absolute; 
    bottom: 10px; 
    left: 0; 
    display: block; 
} 
.headline { 
    color: #FFF; 
    font: bold 24px/45px Helvetica, Sans-Serif; 
    letter-spacing: -1px; 
    background: #e87b10; 
/* Fallback for older browsers */ 
    background: rgba(232,123,16,0.8); 
    padding: 10px; 
    float: left; 
    clear: left; 
} 
.summary { 
    max-width: 350px; 
    margin-top: 3px; 
    color: #FFF; 
    font: 14px/14px Helvetica, Sans-Serif; 
    letter-spacing: 0; 
    background: #e87b10; 
/* Fallback for older browsers */ 
    background: rgba(232,123,16,0.8); 
    padding: 10px; 
    float: left; 
    clear: left; 
} 
.summary a { 
    color: #FFF; 
} 

Answer 1

나는 모든 것을 a 태그 (클리너 코드)로 감쌀 것입니다. 당신은 약간의 CSS를 조정해야합니다.

EDIT 난 그래서 (알림 Phrogz에 감사드립니다) 문법적으로 올바른 span에 div 요소를 변경. div 요소의 CSS에 이미 display: block이 있으므로 span으로 변경하는 것은 문제가되지 않습니다.

<a href="Default.aspx"> 
<span class="image">  
    <img src="Assets/Images/Picture.jpg" alt="Picture" /> 
    <span class="overlay">   
    <span class="headline">Headline</span>   
    <span class="summary">Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.</span>  
    </span> 
</span> 
</a> 

Answer 2

헤드 라인은 왼쪽 떠되고있다. 플로트를 제거하고 display : block을 추가하면; 앵커에, 그것은 전체 이미지 너비를 차지합니다.