div를 오버레이로 가져 오는 CSS 링크

Question

나는 링크가 포함 된 <div>입니다.

이 <div>의 오른쪽 하단 모서리에 마우스를 올리면 오버레이 요소가 <div> 개 이상 있습니다.

이 오버레이 요소에는 링크가 포함되어 있습니다.

내 문제는 위에있는 요소의 링크를 클릭 할 수 없다는 것입니다.

pointer-events: none; 클래스에 .overlay-content을 사용하고 있기 때문에 문제가 발생하지만 사용하지 않으면 두 링크가 모두 죽어 버리게됩니다. 여기

참조하십시오 코드 : 또한

.panel-default1 { 
 
    padding-top: 10px; 
 
    border-radius: 20px; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); 
 
    height: 400px; 
 
    width: 400px; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.amg-corner-button_wrap { 
 
    display: block; 
 
    background-color: #e8c63d; 
 
    position: absolute; 
 
    transform: rotate(45deg); 
 
    right: -320px; 
 
    bottom: -320px; 
 
    width: 400px; 
 
    height: 400px; 
 
    -moz-transition: all 0.5s ease-out; 
 
    -o-transition: all 0.5s ease-out; 
 
    -webkit-transition: all 0.5s ease-out; 
 
    transition: all 0.5s ease-out; 
 
} 
 

 
.amg-corner-button_wrap:hover { 
 
    transform: rotate(45deg) scale(4); 
 
} 
 

 
.overlay-content { 
 
    pointer-events: none; 
 
    bottom: 0; 
 
    color: #333; 
 
    left: 0; 
 
    opacity: 0; 
 
    padding: 30px; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding: 8px; 
 
    right: 0; 
 
    top: 0; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
.overlay-content h2 { 
 
    border-bottom: 1px solid #333; 
 
    padding: 0 0 12px; 
 
} 
 

 
.amg-corner-button_wrap:hover~.overlay-content { 
 
    opacity: 1; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
    -moz-transition-delay: 0.3s; 
 
    -o-transition-delay: 0.3s; 
 
    -webkit-transition-delay: 0.3s; 
 
    transition-delay: 0.3s; 
 
}

<div class="panel panel-default1"> 
 
    <div class="panel-body"> 
 
    <a href="#">Link</a> 
 
    <div class='amg-corner-button_wrap'></div> 
 

 
    <div class="overlay-content"> 
 
     <h2>Image Ink Logo</h2> 
 
     <a href="#">Link</a> 
 
    </div> 
 

 
    </div> 
 
    <!-- panel body --> 
 

 
</div> 
 
<!-- panel default -->

, here is fiddle.

나는 이것을 달성 할 수있는 방법이 있습니까?

Answer 1

실제로 어떤 결점도없는 순수한 CSS 솔루션을 찾지 못했다고 생각합니다.

대신 코너 버튼의 :hover 이벤트를 수신의

JSFiddle

.panel-default1 { 
 
    padding-top: 10px; 
 
    border-radius: 20px; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); 
 
    height: 400px; 
 
    width: 400px; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.amg-corner-button_wrap { 
 
    display: block; 
 
    background-color: #e8c63d; 
 
    position: absolute; 
 
    transform: rotate(45deg); 
 
    right: -320px; 
 
    bottom: -320px; 
 
    width: 400px; 
 
    height: 400px; 
 
    -moz-transition: all 0.5s ease-out; 
 
    -o-transition: all 0.5s ease-out; 
 
    -webkit-transition: all 0.5s ease-out; 
 
    transition: all 0.5s ease-out; 
 
} 
 

 
.wrap:hover .amg-corner-button_wrap { 
 
    transform: rotate(45deg) scale(4); 
 
} 
 

 
.overlay-content { 
 
    pointer-events: none; 
 
    bottom: 0; 
 
    color: #333; 
 
    left: 0; 
 
    opacity: 0; 
 
    padding: 30px; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding: 8px; 
 
    right: 0; 
 
    top: 0; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
.overlay-content h2 { 
 
    border-bottom: 1px solid #333; 
 
    padding: 0 0 12px; 
 
} 
 

 
.wrap:hover .amg-corner-button_wrap ~ .overlay-content { 
 
    pointer-events: auto; 
 
    opacity: 1; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
    -moz-transition-delay: 0.3s; 
 
    -o-transition-delay: 0.3s; 
 
    -webkit-transition-delay: 0.3s; 
 
    transition-delay: 0.3s; 
 
}

<div class="panel panel-default1"> 
 
    <div class="panel-body"> 
 
    <a href="#">Link</a> 
 
    <div class="wrap"> 
 
     <div class='amg-corner-button_wrap'></div> 
 
     <div class="overlay-content"> 
 
      <h2>Image Ink Logo</h2> 
 
      <a href="#">Link</a> 
 
     </div> 
 
    </div> 
 
    </div> <!-- panel body --> 
 
</div> <!-- panel default -->

는 부모 요소에 들어요. :hover은 요소 자식의 마우스 상호 작용에 관계없이 전달되기 때문에 모서리 단추가 이동되면 링크가 포함 된 자식 (오버레이 콘텐츠)에 pointer-events: auto을 설정할 수 있습니다. 이제는 오버레이 콘텐츠를 가져올 수 있으며 wrapping div의 하위 항목이므로 :hover이 전체 배치 div에 활성 상태로 유지됩니다.

Answer 2

이 문제에 대한 CSS 포인터 이벤트 대신 JS 스타일 스와핑을 사용하는 것이 좋습니다. 하단 모서리에 마우스를 올리면 CSS에 한 번 변경하고 마우스를 컨테이너 밖으로 가져갈 때마다 별도의 이벤트를 트리거해야합니다. 나는 CSS가 그런 종류의 조건부 통제를한다고 믿지 않는다.

Answer 3

여기에는 전환 대신 애니메이션을 사용하는 절반의 해결책이 있습니다. 이것은 amg-corner-button_wrap에 마우스를 올려 놓았을 때 움직일 때만 효과적입니다. 나는 애니메이션에 조금 익숙하기 때문에 여기있는 누군가가 후반기에 당신을 도울 수있을 것입니다.

amg-corner-button_wrap에 마우스를 올리고 중간 전환을 가리키면 이상한 영상이 여기에 표시됩니다. 그 이유는 overlay-content에 배경색을 추가했기 때문입니다. 페이드 인하시에는 amg-corner-button_wrap에서 마우스를 떼면 스 와이프가 사라지기 전에 되돌리기 시작합니다.

어쨌든이 50 % 솔루션이 귀하 또는 다른 사람들이 100 %로 운전하는 데 도움이되기를 바랍니다.

@keyframes example { 
 
    0% { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    } 
 
    1% { 
 
    visibility: visible; 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.panel-default1 { 
 
    padding-top: 10px; 
 
    border-radius: 20px; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); 
 
    height: 200px; 
 
    width: 200px; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.amg-corner-button_wrap { 
 
    display: block; 
 
    background-color: #e8c63d; 
 
    position: absolute; 
 
    transform: rotate(45deg); 
 
    right: -120px; 
 
    bottom: -120px; 
 
    width: 200px; 
 
    height: 200px; 
 
    -moz-transition: all 0.5s ease-out; 
 
    -o-transition: all 0.5s ease-out; 
 
    -webkit-transition: all 0.5s ease-out; 
 
    transition: all 0.5s ease-out; 
 
} 
 

 
.overlay-content { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    background-color: #e8c63d; 
 
    bottom: 0; 
 
    color: #333; 
 
    left: 0; 
 
    padding: 30px; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding: 8px; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.overlay-content h2 { 
 
    border-bottom: 1px solid #333; 
 
    padding: 0 0 12px; 
 
} 
 

 
.overlay-content~.amg-corner-button_wrap, 
 
.amg-corner-button_wrap:hover { 
 
    transform: rotate(45deg) scale(4); 
 
} 
 

 
.amg-corner-button_wrap:hover~.overlay-content, 
 
.overlay-content:hover { 
 
    animation-name: example; 
 
    animation-duration: 0.3s; 
 
    animation-timing-function: linear; 
 
    animation-delay: 0.3s; 
 
    animation-fill-mode: both; 
 
}

<div class="panel panel-default1"> 
 
    <div class="panel-body"> 
 
    <a href="#" onclick="alert('outer')">Link</a> 
 

 
    <div class='amg-corner-button_wrap'></div> 
 

 
    <div class="overlay-content"> 
 
     <h2>Image Ink Logo</h2> 
 
     <a href="#" onclick="alert('inner')">Link</a> 
 
    </div> 
 

 
    </div> 
 
    <!-- panel body --> 
 

 
</div> 
 
<!-- panel default -->

Answer 4

:-) 회의, 행운을 실행해야하는 것은 여기 만 변경하려면 CSS와 HTML에 대한 작업 바이올린입니다 : https://jsfiddle.net/y2auh7gn/4/.

링크를 overlay-content과 분리하고 자리에 배치하려면 position: absolute으로 지정하십시오. overlay-content에서 링크를 이동해야 오버레이가 사라지지 않아 오버레이가 사라지지 않습니다.

링크가 코너 조각과 함께 튀어 나오는 부작용이 있습니다.