画像上のボタンがクリックされないようにする

Question

こんにちは htmlサイトでは、私は1つの長方形の画像を持っていて、その上にマウスを置くと2番目の画像が飛び出します。 2番目の画像は元の画像よりも大きく、ボタンの上に表示されます。 問題は、私はボタンをクリックすることができない、それは常にホバーイメージをトリガーすることです。 これを修正してボタンをクリックする方法はありますか？

<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を設定することができますし、それが推移した場合：ここで はフィドル

HTMLですそのように：

.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; 
}