悬停时增加透明背景不透明度？

我想让我的背景图像从.1不透明度增加到.5不透明度，当用户悬停在我的div。悬停时增加透明背景不透明度？

HTML

<div id="list"> 
    <div class="line_one">om nom nom nom...</div> 
    <div class="line_two">18 foods to make you incredibly hungry</div> 
</div>

CSS

#list { 
    display:block; 
    position: relative; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
} 

#list::after { 
    content: ""; 
    background: url('test.jpg'); 
    opacity: 0.1; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
}

必须有办法做到这一点没有JavaScript。有任何想法吗？

来源

2014-01-29 user1787531

请注意发布时的实时预览;） –

Dang，在我有机会解决它之前做到了。将来会做。 – user1787531

另外一个提示，我希望更多的人知道XD在发布一个CSS块时，在代码块前面的一行中放上'<！ - language：lang-css - >'（具有精确的间距），这将允许用于正确的语法突出显示。 –

当然有。

#list::after { 
    transition: opacity 1s ease; 
} 
#list:hover::after { 
    opacity: 0.5; 
}

来源

2014-01-29 21:54:46

完美！我没有意识到::之后需要追求：徘徊，而不是之前。这是我的问题。我会在10分钟内让我回答这个问题。 – user1787531

不要忘记在投票箭头下打勾，你会得到积分，他也是。 – Night

@晚上这太快了 - 问题必须是15分钟;） –

悬停时增加透明背景不透明度？

回答

相关问题