슬라이드 쇼 이미지가 깜박임 : 호버

Question

나는 일종의 슬라이드 쇼를 만들고 있습니다. 이미지 위로 마우스를 이동하면 이미지가 확장되어 다른 이미지와 겹칩니다. 그러나 이러한 상황이 발생하면 펼쳐진 이미지 뒤에있는 이미지가 해당 영역 위로 마우스를 가져 가면 작동합니다.

지금은 거의 완벽하게 작동합니다. 마우스를 가져 가면 확장 된 이미지 만 깜박입니다. 나는 그것을 원하지 않는다. 이 문제를 어떻게 해결할 수 있습니까?

DEMO

HTML :

<div id="expand"> 
    <div class="expand_1"> 
     <figure></figure> 
    </div> 
    <div class="expand_2"> 
     <figure></figure> 
    </div> 
    <div class="expand_3"> 
     <figure></figure> 
    </div> 
    <div class="expand_4"> 
     <figure></figure> 
    </div> 
</div> 

CSS :

#expand { 
    height: 200px; 
} 

.expand_1 { 
    width: 100px; 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    float: left; 
} 

.expand_1 figure { 
    width: 100px; 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    float: left; 
    background: grey; 
} 

.expand_1 figure:hover { 
    width: 400px; 
    height: 200px; 
    float: left; 
    position: absolute; 
    z-index: 1; 
    pointer-events: none; 
    background: grey; 
} 

.expand_2 { 
    width: 100px; 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    float: left; 
} 

.expand_2 figure { 
    width: 100px; 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    float: left; 
    background: black; 
} 

.expand_2 figure:hover { 
    margin-left: -100px; 
    width: 400px; 
    height: 200px; 
    float: left; 
    position: absolute; 
    z-index: 1; 
    pointer-events: none; 
    background: black; 
} 

.expand_3 { 
    width: 100px; 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    float: left; 
} 

.expand_3 figure { 
    width: 100px; 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    float: left; 
    background: green; 
} 

.expand_3 figure:hover { 
    margin-left: -200px; 
    width: 400px; 
    height: 200px; 
    float: left; 
    position: absolute; 
    z-index: 1; 
    pointer-events: none; 
    background: green; 
} 

.expand_4 { 
    width: 100px; 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    float: left; 
} 

.expand_4 figure { 
    width: 100px; 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    float: left; 
    background-color: blue; 
} 

.expand_4 figure:hover { 
    margin-left: -300px; 
    width: 400px; 
    height: 200px; 
    float: left; 
    position: absolute; 
    z-index: 1; 
    pointer-events: none; 
    background-color: blue; 
} 

Answer 1

Working DEMO

사용하지 마십시오 pointer-events: none; 깜박임 효과가 있습니다. 또한 이전 IE 브라우저에서는 지원되지 않습니다. div 대신 figure의에

호버 : 귀하의 답변에 대한

.expand_1:hover figure