html - 更改图像悬停时的背景颜色

Question

如果您将鼠标悬停在图像上，我该如何做到这一点，整个图像会变为黑色(图像链接必须位于 HTML 标记中，因为尺寸和图像是不同的)？

这是我所拥有的:

HTML:

<img src="http://www.floral-directory.com/flower.gif" class="image" />

CSS:

.image {
  width: 250px;
}

.image:hover {
  background: #000000;
}

Answer 1

最简单的方法是将 img 元素包裹在另一个元素中，例如 span:

<span class="imgWrap">
    <img src="http://www.floral-directory.com/flower.gif" class="image" />
</span>

并将其耦合到 CSS:

.imgWrap {
    display: inline-block;
    border: 1px solid #000;
}

.imgWrap:hover {
    background-color: #000;
}

img:hover,
.imgWrap:hover img {
    visibility: hidden;
}

JS Fiddle demo .

而且，如果你想让它更漂亮一点，可以使用过渡来淡入/淡出:

.imgWrap {
    display: inline-block;
    border: 1px solid #000;
    background-color: #fff;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

.imgWrap img {
    opacity: 1;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

.imgWrap:hover {
    background-color: #000;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

img:hover,
.imgWrap:hover img {
    opacity: 0;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

JS Fiddle demo .