JQueryイメージのホバーとクリックの競合

Question

ホバー上のイメージにズームを適用しようとしていますが、クリックするとイメージが拡大したままになります。私は5枚の画像を持っていて、それぞれの画像にマウスを合わせるごとにズームインし、マウスを動かすとズームアウトします。

問題は画像を選択しようとするときです。私がこれを行うと、イメージは少し大きくなり、そのままでそのままになり、サイズが小さくならず、正常に戻ります。これは、私が考えると、hoverとclickの機能の間の競合です。また、別の画像を選択すると、以前に拡大（選択）されていたもう1つの画像が元のサイズに戻ってしまうはずですが、このコンフリクトのために現在も機能していません。

私はS.Oの周りを検索しましたが、私を助けるものは何も見つかりませんでした。以下は

私のコードです：

//Item hover 

$(".anItem").hover(function() { 
    $(this).addClass('transition');  
}, function() { 
    $(this).removeClass('transition'); 
}); 

//Select Item 

$(".anItem").click(function(){ 
    $(".anItem").each(function() { 
     $(this).removeClass("selectedItem"); 
    }); 
    if($(this).hasClass("selectedItem")){ 
     $(this).removeClass("selectedItem"); 
     itemColor = ""; 
    }else{ 
     itemColor = $(this).data("color"); 
     $(this).addClass("selectedItem"); 
     $("#oneBtn").show(); 
    }       
}); 

CSS

.anItem{ 
    width: 90%; 
    height: auto; 
    display: block; 
    margin: 0 auto; 
    cursor: pointer; 
} 

.transition { 
    -webkit-transform: scale(1.3); 
    -moz-transform: scale(1.3); 
    -o-transform: scale(1.3); 
    transform: scale(1.3); 
} 

.anItem{ 
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
} 
/* 
.anItem:hover{ 
    background-color: #ddd; 
    opacity: 0.7; 
} 
*/ 
.selectedItem{ 
    width: 230px; 
    height: auto; 
} 

Answer 1

あなたはこのようなものを望んでいますか？

See this fiddle

私はこのようなあなたのJSコードを簡素化しました：

$(function(){ 
    //Select Item 
    $(".anItem").click(function(){ 
    $('div').find('img').addClass('anItem'); 
    $(this).removeClass("anItem"); 
    }); 
}); 

:hover部分が唯一の私のコードでCSSを使用して行われます。