CSS按钮悬停背景样式子答案

【问题标题】：CSS button hover background style childCSS按钮悬停背景样式子
【发布时间】：2013-04-18 19:47:30
【问题描述】：

当有人将鼠标悬停在其中包含 img 元素的按钮上时，它应该具有红色背景色。

<button class="btn-img">
    <img src="http://upload.wikimedia.org/wikipedia/en/thumb/2/2a/Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg/220px-Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg" alt="Dubai" />
</button>


.btn-img {
    display: block;
    width: 160px;
    height: 120px;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
}

.btn-img:hover {
    background-color: red;
}

.btn-img:hover img {
    background-color: blue;
}

http://jsfiddle.net/28QEM/

这可能吗？是不是因为button元素的原因，因为如果一个div里面的child有背景色，而父背景色改变了，基本上就覆盖了children的背景色。

【问题讨论】：

我想了解您为什么要尝试在图像上设置背景颜色。这是一个图像，而不是一个块容器。即使您确实将背景颜色设置为蓝色，图像的实际像素也会将其覆盖。
@Axel 我知道，但是如果按钮（这是图像的父级）具有背景样式，它应该覆盖图像的实际像素？
@onlineracoon 子元素 (img) 被绘制在父元素上。这就是 CSS 堆叠模型的工作原理。
您是否要更改图像的色调？还是简单地更改图像后面呈现的背景颜色？
@MarcAudet 图片是缩略图，所以当你点击它们时，你会得到全屏版本。当您将鼠标悬停在它们上时，它们应该看起来更暗（背景颜色：按钮上的 rgba(0, 0, 0, .13) 是我的想法使这成为可能）

标签： html css image button background

【解决方案1】：

这是获得所需效果的一种可能方法：

<button class="btn-img">
    <div class="img-wrap">
    <img src="image_name.jpg" />
    </div>
</button>

CSS 可能如下所示：

.btn-img {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: white;
    outline: 1px dotted blue;
}
.btn-img .img-wrap {
    margin: 10px;
}

.btn-img img {
    display: block;
}

.btn-img:hover .img-wrap {
    background-color: black;
}

.btn-img:hover img {
    opacity: 0.8;
}

工作原理

用另一个 <div> 包裹您的图像，以便您可以更准确地控制边距和填充，并为您提供一个挂钩来控制图像背后的背景颜色，而不会使颜色溢出图像本身。

触发.btn-img:hover时，将div.img-wrap的背景色改为黑色，并将图片的不透明度改为0.8。这具有使图像变暗的效果。

您可以通过为图像环绕元素尝试不同的背景颜色和不透明度来试验效果。

我认为这可能适用于 IE7，但请尝试一下。

小提琴：http://jsfiddle.net/audetwebdesign/8QMTv/

顺便说一句...

如果您使用链接包装图像以使用某种 JavaScript 类型的缩放视图效果（例如高滑块），您可以将 <div class="img-wrap"> 替换为简单的 <a> 标记并设置其 display: block。

记住...

浏览器倾向于将<button> 与<span> 等其他内联元素设置不同的样式，因此margin 和padding 等属性的行为可能与您预期的有所不同。

【讨论】：

这个答案产生了预期的结果。