링크 상단에 절대적으로 배치 된 요소

제어 할 수없는 일부 HTML이 있지만 특정 출력을 얻는 방법으로 스타일을 지정할 수 있는지보고 싶습니다. 링크가있는 아이가있는 링크가 있습니다. 링크에 형제가 있지만 링크 중간에 절대적으로 배치 된 제목이 있습니다. 링크가 마우스로 가리켜지면 클릭 할 수 있지만 제목 요소 위로 마우스를 가져 가면 링크를 클릭 할 수 없습니다 (<a>의 자식이 아니기 때문에). 제목이 <a>의 자손이라면 분명히 아무런 문제가 없습니다.링크 상단에 절대적으로 배치 된 요소

원하는 출력을 얻을 수있는 옵션이 있습니까? 내가 말했듯이 내가 스타일을 지정하는 HTML은 편집 할 수 없다. 아래 HTML과 CSS.

궁극적으로 나는 제목이 링크 위에 위치하고 싶지만 제목 위에 마우스를 올려 놓았는지 여부에 관계없이 전체 링크를 클릭 할 수 있도록하고 싶습니다.

<div id="" class="grid-square"> 
    <a href="# class="widget_sp_image-image-link"> 
     <img width="1920" height="1080" class="attachment-full" style="max-width: 100%;" src="..."> 
    </a> 
    <div class="title"> 
     <p>TITLE</p> 
    </div> 
</div> 


.home-grid .grid-square, .home-grid .grid-rectangle-half { 
    background-color: #000; 
    display: block; 
    font-size: 100%; 
    margin-bottom: 30px; 
    overflow: hidden; 
    position: relative; 
} 

.home-grid img { 
    height: 100%; 
    position: absolute; 
    width: 100%; 
} 

.home-grid .title { 
    color: #fff; 
    font-size: 4.8em; 
    font-weight: 600; 
    font-family: "proxima-nova-alt-condensed"; 
    left: 0; 
    margin-bottom: 0; 
    margin-top: 0; 
    position: absolute; 
    top: 50%; 
    text-align: center; 
    width: 100%; 
    z-index: 1; 
}

출처

2016-09-04 Michael Hamilton

당신은 당신이 마우스 이벤트 제목을 통해 이동하여 아래의 링크를 대상으로 지정할 것을 나타 내기 위해서 (때문에), 제목 클래스 없음으로 재산 pointer-events을 설정할 수 있습니다.
다음 스 니펫에서 페이지를 아래로 스크롤하고 제목 또는 이미지를 클릭하여 문서의 맨 위로 돌아갈 수 있습니다.

p { 
 
    margin: 0 ; 
 
} 
 
.grid-square { 
 
    position: relative ; 
 
    width: 300px ; 
 
    height: 800px ; 
 
    line-height: 800px; 
 
} 
 
.home-grid img { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.home-grid .title { 
 
    position: absolute; 
 
    pointer-events: none; 
 
    color: #fff; 
 
    font-size: 4.8em; 
 
    font-weight: 600; 
 
    font-family: "proxima-nova-alt-condensed"; 
 
    width: 100%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    z-index: 1; 
 
}

<div class="home-grid"> 
 
    <div class="grid-square"> 
 
     <a href="#top" class="widget_sp_image-image-link"> 
 
      <img class="attachment-full" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/550px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg"> 
 
     </a> 
 
     <div class="title"> 
 
      <p>TITLE</p> 
 
     </div> 
 
    </div> 
 
</div>

출처

2016-09-04 23:29:33

링크 상단에 절대적으로 배치 된 요소

답변

관련 문제