更改圖像的不透明度和鼠標懸停上添加鏈接背景就可以了

在一個地方，我的工作項目

.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中運行。

來源

2012-02-26 DaveW

請問我們有[jsFiddle]（http://jsfiddle.net/）嗎？ – Ryan 2012-02-26 18:39:55

@minitech - 當然，添加它。 – DaveW 2012-02-26 18:50:15

'-moz'前綴僅針對Firefox。你還需要找到'-webkit'規則。 – Blender 2012-02-26 18:57:35

問題似乎是您將display更改爲inline-block。拿出來，它應該有相同的功能，工作得很好。

改變一些其他的東西似乎有它按你的意圖工作。 http://jsfiddle.net/minitech/v2vtw/2/

來源

2012-02-26 18:57:54 Ryan

轉換工作正常，但預覽圖標出現在圖像下方，出於某種原因，圖像未居中。任何想法？ – DaveW 2012-02-26 19:01:13

添加'.preview {display：inline-block; '做了這份工作。一切工作完美。 – DaveW 2012-02-26 19:07:48

@DaveW：是的，這是因爲它不是'display：inline-block' :)好吧，如何重寫？ http://jsfiddle.net/minitech/v2vtw/4/編輯：看起來像你找到解決方案，沒關係。 :) – Ryan 2012-02-26 19:09:47

更改圖像的不透明度和鼠標懸停上添加鏈接背景就可以了

回答

相關問題