引导模板中的鼠标悬停淡入效果

Question

我在Web应用程序中使用引导程序，并且在使用“ img响应”类以获取以下结果

我的问题是如何添加鼠标悬停淡入淡出效果。 我使用以下代码获得了预期的效果，但是我不确定如何将其与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

Answer 2

确保链接到Bootstrap的CSS 之后链接到自定义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;
}

如果那什么都没做，您可以尝试在行尾的分号前添加！important来覆盖CSS 。

例如。

opacity: 0 !important;

这应该会产生您想要的效果，而不会影响响应速度。