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

Question

当用户将鼠标悬停在我的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的情况下完成此操作.有任何想法吗？

Answer 1

当然有.

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