호버상의 이미지 표시가 작동하지 않습니다.

Question

이미지를 표시하는 데 flexslide를 사용하고 있습니다. 이제 다음/이전 화살표 위로 마우스를 이동하면서 다음/이전 이미지를 미리보기 이미지로 표시하려고합니다. 그러나 이미지를 thubnail로 사용하면 마우스 오버 효과가 작동하지 않지만 CSS 테두리를 사용하면 호버가 잘 작동합니다.

I가 이전의 화살표 이미지를 가리킬 바이올린을 만들었다 (dosent 작동하는지)와 다음 화살표 JSFIDDLE

#carousel .flex-direction-nav li a.flex-prev { 
    background: url('http://cmbstaging.dreamhosters.com/assets/images/arrow-left.png') no-repeat; 
    display: block; 
    width: 18px; 
    height: 39px; 
    left: -36px; 
} 

는 I 디스플레이 바꾸려고 간단한 테두리 (일) 가리켜 블록을 표시하려면 : 인라인 블록. 그러나 그것은 그 일을하지 않았습니다. 팁이 있습니까?

Answer 1

화살표에 Z- 색인을 추가해보십시오. 당신은 화살표 버튼 위에 마우스를 이동하면

.flex-direction-nav, 
.flex-direction-nav * { 
    z-index: 99999 !important; 
} 

Answer 2

하면은 당신의 썸네일 페이드 기능을 입력 위로 마우스를 가져간 다음 트리거합니다. 미리보기 이미지가 이제 마우스 포인터 아래에있는 화살표 위로 이동 했으므로 마우스를 다시 움직이면 곧바로 미리보기 이미지 위에 마우스를 올리면 화살표 위로 마우스를 이동하지 않습니다. 이렇게하면 썸네일을 다시 페이드 아웃하는 맴돌이 기능이 실행됩니다. 이것이 깜박임을 계속하는 이유입니다.

편도은 축소판 이미지에 CSS 옵션 pointer-events: none을 사용하여 축소판 이미지 요소가 마우스를 완전히 무시하도록합니다. 그러나 IE는 이것을 지원하지 않습니다 (실제로 표준을 지원하기 때문에 포인터 이벤트 옵션은 SVG 요소에만 해당됩니다). 따라서이 방법을 사용하면 IE를 제외한 거의 모든 브라우저에서만 작동합니다.

이전 화살표에서이를 증명하는 FIDDLE입니다. (참고 : IE에서는 작동하지 않습니다.)

또 다른 방법으로은 화살표와 축소판 이미지 위에 실제로 새로운 투명 요소를 만드는 것입니다. 마우스를 가져 가면 새 투명 요소로 이벤트 기능이 연결되어 화살표 위로 마우스를 이동하면 썸네일이 맨 위에 표시됩니다.

이전 화살표에서이를 증명하는 FIDDLE입니다. 내가 한 일은 flex-direction-nav에 새 요소를 추가 한 다음 CSS를 다음과 같이 설정했습니다.

a.prevhover { 
    display: block; 
    width: 18px; 
    height: 39px; 
    left: 20px; 
    background-color: transparent; 
    z-index: 10000; 
}