오버 이미지 방지 버튼 클릭 수

Question

안녕하세요. html 사이트에서 나는 하나의 직사각형 이미지를 가지고 있으며 그 위에 마우스를 가져 가면 두 번째 이미지가 튀어 나옵니다. 두 번째 이미지는 원래 이미지보다 크며 버튼 위에 있습니다. 문제는 버튼을 클릭 할 수 없다는 것입니다. 항상 마우스 오버 이미지를 트리거합니다. 버튼을 클릭하면 문제를 해결할 수 있습니까? 는 여기에 바이올린을의

HTML :이 가리킬 경우

<li id="menu-item-2365" class="positionabsolute menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-2365 has-image"><a href="como-ajudar/donativos/" 
class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper"> 
    <img width="126" height="38" src="http://piq.codeus.net/static/media/userpics/piq_307293_400x400.png" class="menu-image menu-image-title-hide" style="position:absolute" alt=""><img width="126" height="145" src="http://piq.codeus.net/static/media/userpics/piq_307293_400x400.png" style="position:absolute" class="hovered-image menu-image-title-hide" alt="" ></span></a></li> 
    <br/> 
    <br/> 
    <br/> 
    <input type="button" value="click" style="margin-left:50px" /> 

https://jsfiddle.net/u15qbh6w/

Answer 1

당신은 그래서 예의 CSS를 보일 것이다 다음, display: initial

을 두 번째 이미지에 display: none을 설정할 수 있습니다 이렇게 :

.menu-item a.menu-image-hovered img.hovered-image, 
.menu-item a.menu-image-hovered:hover img.menu-image { 
    opacity: 0; 
    transition: opacity 0.25s ease-in-out 0s; 
} 
.menu-item a.menu-image-hovered img.hovered-image { 
    display: none; 
} 
.menu-item a.menu-image-hovered:hover img.hovered-image { 
    display: initial; 
    opacity: 1; 
}