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

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;
}