javascript - jQuery图片悬停和点击冲突

Question

我正在尝试在悬停和单击时对图像进行放大效果，图像应保持放大状态。我有一组 5 张图片，每次我将鼠标悬停在每张图片上时，它们都会正确放大，而当我移动鼠标时，它们会按照我想要的方式缩小。

问题是当我尝试选择图像时。当我这样做时，图像应该稍微变大并保持原样，而不是缩小尺寸并恢复正常。这就是我认为 hover 和 click 功能之间的冲突所在。此外，当我选择另一张图片时，之前放大(选择)的另一张图片应该恢复到原始大小，但由于此冲突，这现在也不起作用。

我已经围绕 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 完成。