html - 更改图像不透明度并在鼠标悬停在其上时添加链接背景

Question

我有图像的框架样式:

.frame {
    background:#efefef;
    border:1px solid #f6f6f6;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); /* @todo Old Browsers Fix */
    margin-bottom:15px;
    padding:4px;
}

在我从事的元素的一个地方，我有以下 HTML 代码:

<a href="#" class="preview">
    <img class="frame" src="http://placehold.it/288x159" alt="" />
</a>

基本上，我想在鼠标悬停时更改文件不透明度并向链接添加背景(预览图标)。我有以下代码:

.preview img.frame {
    margin:0;
    position:relative;
}
.preview:hover {
    background:url('../img/icon_zoom.png') center center no-repeat;
    display:inline-block;
    z-index:40;
}
.preview img { /* @todo Add different browsers rules */
    opacity: 1;
    /*moz-transition-property:opacity;
    -moz-transition-timing-function:ease-out;
    -moz-transition-duration:500ms;*/
    -moz-transition:opacity 1s ease-in-out;
}
.preview:hover img {
    opacity:.5;
    -moz-transition:opacity 1s ease-in-out;
    /*-moz-transition-property:opacity;
    -moz-transition-duration:500ms;
    -moz-transition-timing-function:ease-out;*/
    display:block;
    position:relative;
    z-index:-1;
}

但是我遇到了几个问题:- 我怎样才能只显示图像主体的背景(目前它也显示在边框上)？- 为什么不透明度在 Chrome 中没有改变？

jsFiddle添加。如您所见，它在 FF 中有效，但在 Chrome 中无效。

Answer 1

问题似乎是您正在将 display 更改为 inline-block。把它拿出来，它应该具有相同的功能并且可以正常工作。

改变一些其他的东西似乎让它按照你的预期工作。 http://jsfiddle.net/minitech/v2vtw/2/