CSS 오버레이 효과가 작동하지 않는다

목록 항목 위로 마우스를 가져 가면 .cd-img-overlay 클래스가 작동하지 않는 이유를 아는 사람이 있습니까?CSS 오버레이 효과가 작동하지 않는다

CSS :

#cd-team .cd-img-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(92, 75, 81, 0.9); 
    opacity: 0; 
    border-radius: .25em .25em 0 0; 
    -webkit-transition: opacity 0.3s; 
    -moz-transition: opacity 0.3s; 
    transition: opacity 0.3s; 
}

HTML :

<li> 
    <a href="#0" data-type="member-1"> 
     <figure> 
      <img src="images/bruce.jpg" alt="Team member 1" /> 
      <div class="cd-img-overlay"><span>View Bio</span></div> 
     </figure> 
     <div class="cd-member-info"> 
      John Smith <span>Founder &amp; President</span> 
     </div> 
    </a> 
</li>

내가 쉬처럼 작동하는 그 오버레이 클래스를 얻이 수없는 것 팀원 위로 마우스를 가져 가면이 튜토리얼 데모에서 소유하게됩니다. https://codyhouse.co/demo/side-team-member-bio/index.html

출처

2016-06-12 redshift

질문 코드 찾기 도움말에는 질문 자체에 ** ** 그것을 재현하는 데 필요한 가장 짧은 코드가 포함되어야합니다. [** 사이트 또는 예제 링크 **]를 제공 했음에도 불구하고 (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work 그 링크가 유효하지 않게 될 경우 같은 문제를 가진 다른 미래의 SO 사용자들에게는 아무런 가치가 없을 것입니다. –

# cd-team .cd-img-overlay : hover {? –

Paulie_D가 말한 것, 최소한의 예를 만들려고 노력하십시오. 나는 심지어 최소한의 예제를 만드는 것이 당신의 문제를 정렬 할 것이라고 확신한다. 그것은 내 브라우저에서 CSS 전환이'.cd-img-overlay' 대신'.cd-member-info'에 일어나기 때문입니다. 스타일 시트에서 잘못된 선택자를 가졌을 가능성이 있습니다. – grochmal

안녕하세요. 오버레이의 불투명도를 1로 변경하면됩니다. :) 현재는 호버 클래스에 대해 opacity : 0으로 설정되어 있습니다.

출처

2016-06-12 19:04:30

코드에 이것을 추가는 IT에 .. 작동의 단지 호버에 당신은 당신이 1 불투명도를 변경하는 호버 상태가 있습니까 1.

#cd-team li:hover .cd-img-overlay { 
    opacity: 1; 
}

출처

2016-06-12 19:06:03

에 불투명도를 변경하지 않기 때문에? 예 :

a:hover .cd-img-overlay { opacity: 1; }

출처

2016-06-12 19:06:04 jafaircl

호버링 할 때 불투명도를 1로 변경하지 않습니다. 그것이 바로 문제입니다. 작업 URL에있는 다음 코드를 사용하십시오.

.no-touch #cd-team li:hover .cd-img-overlay { opacity: 1; }

출처

2016-06-12 19:07:21 SESN

CSS 오버레이 효과가 작동하지 않는다

답변

관련 문제