Question

当有人将鼠标悬停在其中包含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/

这可能吗？是因为按钮元素，因为如果div中的子项具有背景颜色，并且父背景颜色发生更改，则它基本上会覆盖子项的背景颜色。

Answer 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>并将其设置为{{ 1}}。

请记住......

浏览器倾向于将display: block设置为与<button>等其他内联元素不同，因此边距和填充等属性的行为可能与您预期的有所不同。

CSS按钮悬停背景样式孩子

1 个答案: