JQuery图像悬停并单击冲突

JQuery image hover and click conflict

本文关键字：单击 冲突 悬停 图像 JQuery      更新时间：2023-09-26

我正试图在悬停和单击时对图像进行放大效果，图像应保持放大状态。我有一组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;
}

你想要这样的东西吗？

看看这个小提琴

我简化了你的JS代码如下：

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

:hover部分仅在我的代码中使用CSS完成。

相关文章：