Question

我试图在此网站http://www.trask-industries.com/#/media上实现效果，当内容悬停在其上时，黄色会消耗它并且标题的颜色会发生变化。当我尝试重新创建此效果时，我的标题变得不可读。 jsfiddle.net/m8Z25

.content1:hover, .content2:hover, .content3:hover, .content4:hover, .content5:hover, .content6:hover
{
    background-color: white;
    opacity: 0.30;
    transition: .2s;
    webkit-transition: .2s;
   -webkit-transition: all 500ms ease;
}

h1:hover
{
    color: black;
}

h2
{ 
   color: red;
   position:absolute;
   bottom: -10;
   padding-left: 30;
}

h1
{
    color: black;
}

Answer 1

这并不是100％清楚你想要在这里实现的目标......

据我所知。它变得几乎无法读取，因为您正在向内容容器添加不透明度。这会影响所有内容（包括背景），因此一切都会褪色。

这取决于您在内容容器后面的内容（您的网站背景）。

您演示的网站不会使用不透明度来更改任何内容。我想它只是将背景颜色从浅紫色变为深紫色

尝试删除opacity:0.30;并更新背景/文字颜色。

请参阅This jsFiddle，了解更改颜色与使用不透明度的示例...

悬停颜色使标题不可读

1 个答案: