CSS 호버링이 올바르게 작동하지 않습니다.

Question

CSS 호버에 몇 가지 문제가 있습니다.

나는 이미지 위로 마우스를 가져 가면 링크가있는 투명한 div가 표시되어이를 클릭하여 다른 페이지로 이동할 수 있습니다. 이 페이지와 같이 닮은 것 뉴스를 가리키면

위로 마우스를 가져 가면 태그가 벗어나 호버링이 제대로 표시되지 않습니다. 이 붙어 는

.cvr:hover { 
 
    background-color: rgba(0, 0, 0, 0.600); 
 
    height: inherit; 
 
    width: inherit; 
 
    float: left; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    visibility: visible; 
 
} 
 
.link { 
 
    word-break: normal; 
 
    word-wrap: break-word; 
 
    display: block; 
 
    height: inherit; 
 
    width: inherit; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: aliceblue; 
 
    visibility: hidden; 
 
} 
 
.cvr:hover>.link { 
 
    visibility: visible; 
 
} 
 
.img { 
 
    width: inherit; 
 
    height: inherit; 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div class="person"> 
 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
 
    <div class="cvr"> 
 
    <a class="link" href="#"> link text is here</a> 
 
    </div> 
 
</div> 
 
<div class="person"> 
 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
 
    <div class="cvr"> 
 
    <a class="link" href="#"> link text is here</a> 
 
    </div> 
 
</div> 
 
<div class="clear"></div>

Answer 1

당신은이 상태에서 표시가하고자하는 요소의 부모에게 :hover 의사 선택을 적용해야합니다.

현재이 규칙을 .cvr에 적용 했으므로 해당 규칙을 상위 포함 요소에 선언해야합니다. .person입니다.

.cvr { 
 
    background-color: rgba(0, 0, 0, 0.600); 
 
    height: 100%; 
 
    width: inherit; 
 
    float: left; 
 
    position: absolute; 
 
    left: 0px; 
 
    transition: .7s; 
 
    right: 0px; 
 
    opacity: 0; 
 
    bottom: -500px; 
 
    visibility: visible; 
 
} 
 
.link { 
 
    word-break: normal; 
 
    word-wrap: break-word; 
 
    display: block; 
 
    height: inherit; 
 
    width: inherit; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: aliceblue; 
 
} 
 
.img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.clear { 
 
    clear: both; 
 
} 
 
.person:hover .cvr { 
 
    bottom: 0px; 
 
    opacity: 1; 
 
} 
 
.person { 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: auto; 
 
}

<div class="person"> 
 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
 
    <div class="cvr"> 
 
    <a class="link" href="#"> link text is here</a> 
 
    </div> 
 
</div> 
 
<div class="person"> 
 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
 
    <div class="cvr"> 
 
    <a class="link" href="#"> link text is here</a> 
 
    </div> 
 
</div> 
 
<div class="clear"></div>

Answer 2

이를 달성하기 위해 여러 방법이 있습니다를 어떻게 해야할지하지 않는 코드를 여러 번 바뀌었다. 컨테이너에서 상대적 위치를 사용하고 링크 컨테이너에서 절대 위치를 지정하는 것이 좋습니다.

background-color: rgba(0,0,0,0); 

처음 세 값은 RGB 색상 코드를 대표하고 마지막으로 나는 약간 당신이있어 변경 1.

0에서 불투명도를 대표하는 HTML을 너무 : 당신은 너무 불투명 재생 RGBA 색상을 사용 당신이 계급이라는 것이 그들의 기능을 대표합니다. 여기 데모입니다 : https://jsfiddle.net/ecpb6tre

Answer 3

싶은 것은이 추가

.cvr { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

을 그리고, 추가

.person { 
    position: relative; 
} 

이 작동하는 이유는 절대 위치가 요소에 상대적이다 위치 속성이 명시 적으로 선언 된 첫 번째 상위 항목입니다. .person 클래스에는 선언 된 위치가 없으므로 child 요소에 position : absolute를 넣는 것은 페이지를 기준으로 위치를 지정한다는 것을 전제로합니다.

Answer 4

이 코드를 사용해보십시오. 작동합니다.

<style> 
.person { position:relative; width:50%; } 
.person .cvr { display:none; background-color: rgba(0, 0, 0, 0.600); height: 100%; width: 100%; position: absolute; left: 0px; top: 0px; visibility: visible; } 
.person:hover .cvr { display:block; } 
.person img { width:100%; } 
.person .textdiv { display:table; height: 100%; width: 100%; } 
.person .cvr a { display: table-cell; text-align: center; text-decoration: none; color: aliceblue; vertical-align: middle; } 
</style> 

<div class="person"> 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
    <div class="cvr"> 
    <div class="textdiv"><a class="link" href="#"> link text is here</a></div> 
    </div> 
</div> 

<div class="person"> 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
    <div class="cvr"> 
    <div class="textdiv"><a class="link" href="#"> link text is here</a></div> 
    </div> 
</div>