이미지

Question

나와 함께 곰하시기 바랍니다. 이미지는 미리보기 이미지 크기가 될 것이므로 적합하지 않습니다.

문제점 : 마우스 오버시 오버레이 상단에 링크가 표시되지 않으므로 "색인"이라고 표시된 두 개의 CSS 부분을 추가하여 호버 링크의 색인을 변경하려고했지만 현재는 오버레이입니다 ? 호버 구문

<div class="port_container"> 
<a href="http://hup.o-zen.de" class="port_link"> 
<img src="http://google.com" alt="some text" class="port_image"> 
</a> 
<div class="port_overlay"> 
</div> 
</div> 
<p>text goes here</p> 

.port_container { 
position: relative; 
width: 50%; 
} 

.port_image { 
display: block; 
width: 100%; 
height: auto; 
} 

.port_overlay { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100%; 
    width: 100%; 
    opacity: 0; 
    transition: .5s ease; 
    background-color: #ff6600; 
    } 

/* added index*/ 
.port_link { 
    position: relative; 
    transition: z-index 0s; 
    z-index: 0; 
    } 
/*index on hover*/ 
.port_link:hover { 
transition: z-index 0.5s ease; 
z-index: 1; 
} 

.port_container:hover .port_overlay { 
opacity: 0.5; 
} 

내가 링크에서 전체 사업부를 포장하는 것은 완전히 아니라고 읽어

아마 내가 Z- 인덱스의 작동 방식을 이해하거나 내가 잘못 생각하지 않았다 :(사라 그래서 나는 그 길로 가지 않고 코드에서 내 실수를 발견 할 수 있기를 바랍니다.

Answer 1

.port_overlay이 (가) pointer-events:none을 (를) 추가하면 링크를 숨기고 있습니다. 나는 그것을 재 작성하고 이것을 향상시킬 필요가 없도록 개선했다. 오버레이는 이미지의 일부이다.

포크 This on Codepen.

body { 
 
    font-family: sans-serif; 
 
} 
 

 
.container { 
 
    width: 100px; 
 
} 
 
.container a .image { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-size: cover; 
 
} 
 
.container a .image:before { 
 
    opacity: 0; 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    background-color: #ff6600; 
 
    mix-blend-mode: multiply; 
 
    -webkit-transition: opacity .25s ease; 
 
    transition: opacity .25s ease; 
 
} 
 
.container a:hover .image:before { 
 
    opacity: 1; 
 
} 
 
.container .caption { 
 
    max-width: 100%; 
 
    padding: 4px 0; 
 
}

<div class="container"> 
 
    <a href="yoursite"> 
 
     <div class="image" style="background-image:url(http://placekitten.com/g/300/300)"></div> 
 
    </a> 
 
    <div class="caption">Text goes here.</div> 
 
</div>

이 도움이 또는 방법으로 주제를 벗어 있다면 투표와 녹색 눈금과 같은 올바른 작동하는 답을 표시하는 것을 잊지 마십시오.