javascript - 更改全屏背景并在 DIV 悬停时添加文本

Question

我正在使用 Bootstrap，我有 6 列，其中包含图标/文本，当我将鼠标悬停在每一列上时，我需要该部分的背景在过渡时发生变化(悬停每一列会将该部分的背景更改为不同的东西) 每列中还会显示文本和按钮。

我试图通过在 HTML 中使用 6 种不同的变体并隐藏/淡化它们来使用 jQuery 来做到这一点，但这太复杂了:

$('.process-box').hover(function() {
    $(this).find('.process-intro').hide();
    $(this).find('.process-content').fadeIn();
}, function() {
    $(this).find('.process-content').hide();
    $(this).find('.process-intro').fadeIn();
});

类似的东西，但是必须有一种更简单的方法来使用 CSS 来做到这一点吗？

我已尝试将本教程应用于我的情况，但我很难在我的代码中应用相同的方法:http://designshack.net/articles/css/swap-your-pages-background-image-on-navigation-hover/

我已经用示例设置了一个 jsfiddle:https://jsfiddle.net/hqa8k0ze/

已更新

我有点想出了如何使用 jQuery 更改图像:

$('.content1').hover(function() {
$('.services-websites').css({'background-image': "url(images/services-apps.jpg)" , 'transition': "opacity 1s ease-in-out"})
}, function() {
$('.services-websites').css({'background-image': "url(images/services-websites.jpg)" , 'transition': "opacity 1s ease-in-out"})
});

图像在第一次悬停时不会改变，它首先将背景变为白色，就像图像消失一样。同样由于某种原因，过渡没有。

我还需要六个不同的函数来更改每列悬停时的图像吗？

Answer 1

您可以在悬停列时使用不透明度过渡:

.column-inner{
  opacity: 0;
}
.col-lg-2:hover .column-inner{
  opacity: 1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

column-inner 是您想要显示/隐藏的每个列中内容的包装器，您只需在悬停其父级(它自身的列)时将其不透明度传入和传出。

https://jsfiddle.net/hqa8k0ze/1/