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悬停铬无法正常工作

回答

相关问题