css懸停在轉換

我有一個關於我的css懸停效果的問題。css懸停在轉換

這是我的DEMO從codepen頁面。

問題是懸停在圖像上。如果你點擊我的演示頁面，那麼你會發現我的腳本中出現了什麼問題。

當你用鼠標將鼠標懸停在圖像上時，第一個圖像是可以的，但是當你移動鼠標時，另一個圖像的漸變顏色向左移動。

有誰知道解決方案？

這是爲圖像懸停過渡和漸變顏色我的CSS代碼：

.abo_im { 
    float:left; 
    width:170px; 
    height:150px; 
overflow:hidden; 
    -webkit-transition: all .3s ; 
     -moz-transition: all .3s ; 
     -ms-transition: all .3s ; 
     -o-transition: all .3s ; 
     transition: all .3s ; 


} 
.abo_im img.height { 
    width: 100%; 
    height:auto; 

} 
.abo_im img { 
    width:100%; 

} 
.abo_im:hover { 
    width:120%; 
    margin: 0 0 0 -10%; 
     -moz-transition: all .3s ; 
     -ms-transition: all .3s ; 
     -o-transition: all .3s ; 
     transition: all .3s ; 
} 
.gradient_c { 
    position:absolute; 
    width:170px; 
    height:150px; 
    z-index:1; 
    background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); 
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); 
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); 

    }

來源

2014-09-26 innovation

只是一個提示：這是沒用的定義都在正常和'了'transition'屬性：hover'選擇......只留下第一個，和從'：hover'移除屬性 – LcSalazar 2014-09-26 15:39:26

@LcSalazar謝謝 – innovation 2014-09-26 15:46:14

元件div.gradient_c絕對定位，並且不附着於overflow: hidden;相對定位添加到它的父和增加寬度 - updated demo

.abo_im { 
    position: relative; 
} 
.gradient_c { 
    width: 186px; 
}

更新的問題是，你正在調整元素與定位的死者。他們按照增加的寬度出現，好像他們正在移動

將.abo_im:hover更改爲.abo_im:hover img只會影響圖像的寬度。 Demo

來源

2014-09-26 15:44:02

最佳解決方案謝謝 – innovation 2014-09-26 15:51:23

非常感謝。我可以問你關於這個問題的另一個問題嗎？在這個CSS代碼中有這樣一行：'.abo_loggo'有一個背景圖像，如果你改變它然後添加背景顏色：紅色，你看到同樣的問題仍然是一個。我能爲此做些什麼？你可以幫我嗎？ – innovation 2014-09-26 15:57:58

更新了我的答案 – 2014-09-26 16:02:16

變化width屬性它應該工作

.gradient_c { 
    position:absolute; 
    width:auto;//change this 
    height:150px; 
    z-index:1; 
    background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); 
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); 
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); 
}

來源

2014-09-26 16:02:09

css懸停在轉換

回答

相關問題