javascript - Bootstrap 模板中的鼠标悬停淡入淡出效果

Question

我在我的 web 应用程序中使用 bootstrap，我正在使用 'img-responsive' 类来获得以下结果

我的问题是如何添加鼠标悬停淡入淡出效果。我使用以下代码来获得我想要的效果，但我不确定如何将其与 Bootstrap 主题结合起来。我尝试添加淡出 css，但我没有做对:

<script type='text/javascript'>
$(document).ready(function(){

$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});
</script>
<style>
div.fadehover {
    position: relative;
    }

img.a {
    position: absolute;
    left: 0;
    top: 0;
        z-index: 10;
    }

img.b {
    position: absolute;
    left: 0;
    top: 0;
    }
</style>

Answer 1

这是您要找的吗？

.button{
   width: 200px;
   height: 200px;
   background: red;
   -webkit-transition-duration: 0.4s;
   -moz-transition-duration: 0.4s;
   -o-transition-duration: 0.4s;
   transition-duration: 0.4s;
}

.button:hover{
    opacity:0;
}

JSFIDDLE