懸停時增加透明背景不透明度？

我想讓我的背景圖像從.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分鐘;） –

懸停時增加透明背景不透明度？

回答

相關問題