当用户将鼠标悬停在我的div上时,我希望我的背景图像从.1不透明度增加到.5不透明度。
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的情况下完成此操作。有什么想法吗?
答案 0 :(得分:7)
当然有。
#list::after {
transition: opacity 1s ease;
}
#list:hover::after {
opacity: 0.5;
}