鼠标悬停在引导程序模板中的淡入淡出效果

Question

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

我的问题是如何添加鼠标悬停淡入淡出效果。我使用以下代码来获得我想要的效果，但我不确定如何将其与引导主题相结合。我试图添加淡出的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

Answer 2

确保您链接到自定义CSS（或使用标记） AFTER 指向Bootstrap CSS的链接

然后试试这个：

img.a {
    opacity: 1;   /* redundant, but helps illustrate what is happening */
    -webkit-transition: 400ms; /* or however long you want */
    -moz-transition-duration: 400ms; /* or however long you want */
    -o-transition-duration: 400ms;
    transition-duration: 400ms;
}
img.a:hover {
    opacity:0;
}

如果没有做任何事情，您可以尝试通过添加来覆盖CSS ！important 在分号后面的分号

例如

opacity: 0 !important;

这应该具有您正在寻找的效果，而不会影响响应能力。