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

Change fullscreen background and add text on hover of DIV

本文关键字：悬停 DIV 添加 文本 背景      更新时间：2023-09-26

我正在使用 Bootstrap，我有 6 列，里面有图标/文本，当我将鼠标悬停在每一列上时，我需要在过渡中更改该部分的背景(悬停每一列会将该部分的背景更改为不同的内容(还有文本和一个按钮将出现在每列中。

我试图通过让 6 种不同的变体在 HTML 中隐藏/淡入淡出来使用 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"})
});
图像在

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

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

您可以在将鼠标悬停在列上时使用不透明度过渡：

.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;
}
列

内部是要显示/隐藏的每一列中内容的包装器，您只需将其不透明度移入和移出在其父列(它自己的列(上即可。

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

相关文章：