jquery - 0 css 中的不透明度以及使用 jquery mouseenter 更改不透明度和大小的内容

Question

我想创建一个 div 并使用 css(背景、颜色、边框)将不透明度设置为 0，这样完全不可见，并且只有在启用 js 的情况下整个事情才会起作用。旁边还有一个div，想用jQuery把不透明度改成1，改大小。如果可能，使用 fadeIn fadeOut。

到目前为止，我没有走多远，仍然无法改变不透明度，尽管进行了研究。

$(document).ready(function(){
    $("#showCaseWD").hover(function(){
        $("#wdShow").css({color:rgba(0,0,0,1.0)});
    });
});

Answer 1

你很接近.. 如果你不希望不透明度变化突然，你将不得不使用 css 过渡。 css 'color' 是指 div 内文本的颜色。所以如果你想改变整个 div 的不透明度，只需使用 css 'opacity' 属性。

#wdShow {
    opacity: 0;
    transition: 0.2s opacity ease;
}

$(document).ready(function(){
    $("#showCaseWD").on('mouseenter', function() {
        $("#wdShow").css('opacity', '1');
    });
});