我想使用 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 也只是为了测试(这是我用谷歌搜索的第一张图片):
<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