CSS:圆角+不透明度=图像在Firefox 19中消失

Question

我想使用CSS为我的图像添加圆角,并在鼠标悬停时更改不透明度,因为这很可爱.有一个错误:鼠标悬停后,图像消失.

CSS非常简单:

.article img {
  margin-bottom: 5px;
  -moz-border-radius: 15px;  /* for Firefox */
  -webkit-border-radius: 15px; /* for Webkit-Browsers */
  border-radius: 15px; /* regular */
}

.article:hover .img {
  opacity: 0.8;
}

html也只是为了测试(这是我用Google搜索的第一张图片):

<li class="article">
    <div class="img">
        <a href="#">
            <img src="http://i.telegraph.co.uk/multimedia/archive/02371/karen-ann-jones_2371086k.jpg" alt="Url">
        </a>
    </div>
</li>

你可以在jsfiddle上看到它:http://jsfiddle.net/9DjLT/3/

浏览器:ff19

Answer 1

我认为你在 css 中有问题，因为 li:hover 它占用了 100% 的宽度。因此，直到您的鼠标光标位于您的图像效果的不透明度上。只需尝试以下 CSS 更改

.img a:hover{
  opacity: 0.8;
 }