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完成。

JQuery图像悬停并单击冲突

1 个答案: