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/

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

1 个答案: