Question

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

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

$('.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/

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

1 个答案: