CSS懸停鉻無法正常工作

我想通過使用CSS在我的頁面中使用Pinterest樣式。它適用於IE10，FF21，Safari5.1.7以及Chrome版本的Android。但它不適用於Chrome28.0.1500.72。CSS懸停鉻無法正常工作

我的HTML如下：

<div id="columns"> 
    <div class="pin"> 
     <img src="" alt="objeto1"> 
     <p>Lorem ipsum dolor sit ame</p> 
    </div> 
    <div class="pin"> 
     <img src="" alt="objeto2"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut e</p> 
    </div> 
    ... 
</div>

的CSS的以下內容：

#columns { 
-webkit-column-count: 3; 
-webkit-column-gap: 10px; 
-webkit-column-fill: auto; 
-moz-column-count: 3; 
-moz-column-gap: 10px; 
-moz-column-fill: auto; 
column-count: 3; 
column-gap: 15px; 
column-fill: auto; 
} 

.pin { 
display: inline-block; 
background: #FEFEFE; 
border: 2px solid #FAFAFA; 
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); 
margin: 0 2px 15px; 
-webkit-column-break-inside:avoid; 
-moz-column-break-inside:avoid; 
-o-column-break-inside:avoid; 
-ms-column-break-inside:avoid; 
column-break-inside:avoid; 
padding: 15px; 
padding-bottom: 5px; 
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9); 
opacity: 1; 
-webkit-transition:all .2s ease; 
-o-transition:all .2s ease; 
-moz-transition:all .2s ease; 
-ms-transition:all .2s ease; 
transition:all .2s ease; 
} 

.pin img { 
width: 100%; 
border-bottom: 1px solid #ccc; 
padding-bottom: 15px; 
margin-bottom: 5px; 
} 

.pin p { 
font: 12px/18px Arial, sans-serif; 
color: #333; 
margin: 0; 
} 

@media (min-width: 1100px) { 
#columns { 
    -webkit-column-count: 5; 
    -moz-column-count: 5; 
    column-count: 5; 
} 
} 

#columns:hover .pin:not(:hover) { 
opacity: 0.4; 
}

的jsfiddle：http://jsfiddle.net/TRYSR/

的問題是，在Chrome當我徘徊一個元素，它但是當我更換其他元素時，這個新元素會在我將鼠標移動到其他元素上時閃爍，並且如果我停止移動鼠標，它將保持0.4的不透明度。但是，如果我停止移動鼠標，它有時會在2秒內突然出現，而在6秒鐘內，其他人會突然停止移動，並且元素具有1不透明度。

來源

2013-07-14 Adrián Casimiro

我無法重現你的問題。周圍的html怎麼樣？ –

在我的Chromium 30.0.1553.0上有效。也許這是一個Chrome28.0.1500.72的錯誤，並且考慮到Chrome強制自動更新，它不應該是一個大問題。 – Oriol

這看起來像是另一個長期存在的Chrome定位錯誤實例，有時會在將CSS過渡動畫與不透明屬性結合使用時發生。除了動畫之外，我不知道有什麼解決方法。 – Ennui

當您將鼠標懸停在較大的圖片框上時，我能夠看到一個小動作。我改變了動畫從所有的背景，它看起來就像是爲我取出：

-webkit-transition:background .2s ease; 
-o-transition:background .2s ease; 
-moz-transition:background .2s ease; 
-ms-transition:background .2s ease; 
transition:background .2s ease;

http://jsfiddle.net/pertrai1/zKjZw/1/

來源

2013-07-14 12:43:34 pertrai1

CSS懸停鉻無法正常工作

回答

相關問題