CSS psuedo : 요소 호버 효과가 올바로 작동하지 않습니다.

Question

psudeo:element을 올렸을 때 CSS를 ease-in-out 일부 텍스트에 사용하고 있습니다.

아래 코드는 호버에 표시하고 싶은 요소의 .description 요소를 선택하는 코드입니다. 그러나 호버 효과는 내가 원하기 전에 발생합니다.

.grid-item:hover .description { 
    visibility: visible; 
    opacity: 1; 
    } 

커서가 부모 요소보다 몇 센티미터 위에 있으면 호버 (hover) 상태가 트리거됩니다. 이 요소의 여백/여백에 문제가있을 수 있습니다. 나는 운이없는 많은 것을 시도했다.

여기는 full code입니다.

각 이미지 위에 부드럽게 조금씩 대고 문제를 파악하십시오.

Answer 1

텍스트를 가리키는 CSS 선택기를 변경하기 만하면됩니다. 현재는 .image (즉, .grid-item)의 부모가 부상했을 때 트리거됩니다. 대신 다음과 같이 설정하면 이미지가 포함 된 div가 이동 될 때 트리거됩니다. https://codepen.io/anon/pen/WEWmEw?editors=1100

Answer 2

@Jordan 미구엘, 당신 말이 맞아 :

.image:hover + .description { 
    visibility: visible; 
    opacity: 1; 
} 

여기에 업데이트 된 펜입니다. 콘텐츠 자체는 물론 패딩입니다. 당신은 당신의 선택의 브라우저 (I 크롬의 사진에 사용하고), 당신은 아마 특정 CSS 요소에 대한 상자 모델을 표시하는 도구를 찾을 수 있습니다위한 개발 도구를 열 균열 경우

. 요소를 선택할 때 hover을 트리거하는 오른쪽과 왼쪽의 패딩을 볼 수 있습니다.

도구의 왼쪽 창에서 선택한 요소와 적용된 스타일을 볼 수 있습니다. 여기에서 기대하는 동작을 얻으려면 무엇을 변경해야하는지 파악할 수 있습니다.