0

当有人将鼠标悬停在其中包含 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的背景色。

4

1 回答 1

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 类型的缩放视图效果（例如 highslider），您可以<div class="img-wrap">用一个简单的<a>标签替换并设置其display: block.

记住...

浏览器的样式往往<button>与其他内联元素（如）不同<span>，因此边距和填充等属性的行为可能与您预期的有所不同。

于 2013-04-18T20:43:42.300 回答