Question

我最近开始为我的一个朋友艺术项目建立一个网站，直到现在一切都很好。当你悬停时，我正在使用jQuery使我的bootstrap jumbotron fadeOut达到0.6不透明度，以及使用按钮创建一个新的div。我遇到的问题是，当我将鼠标悬停在超大屏幕上时，它会淡出并显示按钮，但按钮也是不透明的。请帮助我，我刚刚完成了关于codecademy的jQuery课程，我很高兴继续使用它。

js fiddle - https://jsfiddle.net/rsgf7w3u/

Jquery的

$(document).ready(function(){
$('.jumbotron').mouseenter(function(){
    $('.jumbotron').stop().fadeTo('fast', .6);
    $('.jumbotron').prepend('<div id="view-gallery"><button>View Gallery</button></div>');

});
$('.jumbotron').mouseleave(function(){
    $('.jumbotron').stop().fadeTo('slow', 1);
    $('#view-gallery').remove();
});

}）;

CSS

.jumbotron {
background-image:url("mc.jpg");
height:400px;
background-repeat:no-repeat;
background-size:cover;

}
#view-gallery button {
width:200px;
height:50px;
background-color:#2F2D30;
border-radius:1px;
border:none;
color:white;
}

Answer 1

不透明度不容易被覆盖 - 你可以试试rgba技巧。我更新了你的小提琴：https://jsfiddle.net/rsgf7w3u/4/

background-color:rgba(47,45,48);

参考：Opacity !important doesn't work

当父div淡出时保持按钮不透明度

1 个答案: