Question

有没有办法让图像从img-circle更改为img-rounded而不是立即通过鼠标悬停逐渐改变？

我知道必须通过javascript / jquery来完成，因为没有其他方法来更改对象的类别，否则

Answer 1

既有基于CSS的解决方案，也有基于jQuery的解决方案。以下代码，以及http://jsfiddle.net/technotarek/K52j4/的两个实例：

的jQuery

$(".js").hover(function() {
    $(this).animate({
        "border-radius": "6px"
    });
}, function() {
    $(this).animate({
        "border-radius": "500px"
    });
});

CSS3（不需要javascript;仅适用于Modern Browsers）

img.css {
    -webkit-transition:border-radius 0.8s linear;
    -moz-transition:border-radius 0.8s linear;  
    -o-transition:border-radius 0.8s linear;      
    transition:border-radius 0.8s linear;  
}
    img.css:hover {  
        border-radius: 6px;
    }

Answer 2

是的，你可以使用jquery来完成这项工作，就像这样：

$("img[class='img-circle']").hover(function(){
      $(this).removeClass("img-circle").addClass("img-rounded");
   },function(){
      $(this).removeClass("img-rounded").addClass("img-circle");
});

将bootstrap的img-circle过渡到img-rounded逐渐变细

2 个答案: