Html CSS按钮悬停背景样式子项

当有人将鼠标悬停在一个按钮上，按钮内有一个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;
}

.btn img{
显示：块；
宽度：160px；
高度：120px；
保证金：0；
填充：0；
边界：0；
光标：指针；
}
.btn img：悬停{
背景色：红色；
}
.btn img：悬停img{
背景颜色：蓝色；
}

---

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

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

<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;
}

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

它的工作原理

使用另一个

包装图像，以便更准确地控制边距和填充，并提供一个钩子来控制图像后面的背景色，而不会使颜色溢出到图像本身之外

触发

.btn img:hover

时，将

div.img-wrap

的背景色更改为黑色，并将图像的不透明度更改为0.8。这具有使图像变暗的效果

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

我认为这可能在IE7中起作用，但是试试看

小提琴：

顺便说一下…

如果您使用链接包装图像以使用某种JavaScript类型的缩放视图效果（例如highslider），则可以使用简单的

标记替换

，并设置其

显示：block

记住……

---

浏览器的样式往往与其他内联元素（如

）不同，因此边距和填充等属性的行为可能与您预期的稍有不同。

我试图理解您为什么要在图像上设置背景色。这是一个图像，不是块容器。即使您确实将背景颜色设置为蓝色，图像的实际像素也会将其覆盖。@Axel我知道，但是如果按钮（图像的父项）具有背景样式，它应该会覆盖图像的实际像素？@onlineracon子元素（img）被绘制在父元素上。这就是CSS堆叠模型的工作原理。您是否正在尝试更改图像的色调？或者简单地更改图像后面渲染的背景颜色？@MarcAudet这些图像是缩略图，因此当您单击它们时，您将获得全屏版本。当您将鼠标悬停在它们上方时，它们应该显示得更暗（背景色：按钮上的rgba（0,0,0,13）是我的想法，使其成为可能）此答案会产生所需的结果。