1

我在链接图像上使用以下 CSS 代码：

a img:hover {
    filter: alpha(opacity=80);
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    opacity: 0.8;
    background: #f00;
}

这个想法是，当用户将鼠标悬停在图像上时，它会被略微染成红色。浏览器似乎忽略了“背景：#f00;” 财产。

我究竟做错了什么？

提前致谢

4

1 回答 1

1

它不会因为你有图像而工作，所以你需要一个覆盖元素，可能是一个 div

演示

HTML

<div class="wrap">
    <img src="http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
    <div class="overlay"></div>
</div>

CSS

.wrap {
    position: relative;
    display: inline-block;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    top: 0;
}

.wrap:hover .overlay {
    background: rgba(250, 0, 0, .1);
}

注意：您应该有一个定位的相对容器，否则您的绝对定位的 div 将在野外用完，此外，您可以删除display: inline-block;并为容器元素提供相应的高度和宽度，请注意它是否粘在您的图像上，或者您也可以使用过渡来获得平滑的效果

对于过渡，您需要像这样修改类

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    top: 0;
    transition: background 1s;
    -moz-transition: background 1s;
    -webkit-transition: background 1s;
    -o-transition: background 1s;
}

演示过渡

于 2013-04-24T07:15:51.290 回答