css 中的 0 不透明度以及使用 jquery mouseenter 更改不透明度和大小的方法

Question

我想创建一个 div 并将不透明度设置为 0 并使用 css(background, color,border) 完全不可见，并且整个事情只有在启用 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');
    });
});

Answer 2

$(document).ready(function(){

    $('#wdShow'){
      'opacity':0.8,
      'transition':'0.3s opacity linear'
    });

    $("#showCaseWD").hover(function(){
        $("#wdShow").css({
           'background-color':'rgb(0,0,0,1.0)'
    });

});

Answer 3

试试这个：http://jsfiddle.net/1xopc6bq/1/。

$("#showCaseWD").mouseenter

要使 div 不可见，您可以使用 opacity, background-color: rgba(0,0,0,0);或可见性：隐藏；

另外我推荐阅读http://www.w3schools.com/css/css_display_visibility.asp