css - 使用 CSS(无 JavaScript)在悬停时放大和移动图像 IE 9 及更高版本

Question

如标题所述，我想使用 CSS 将多个图像放大并移动到固定位置。每个图像将放大到相同的宽度并移动到相同的位置。我知道这可以通过 javascript 和 CSS3 transition 属性实现。我想知道它是否可以只用 CSS 完成，并且仍然可以在 IE >= 9 中查看。这是我的代码:

<div class="logos"><a href=""><img src="" alt="" title="" /></a></div>



.logos {height: 100px; width: 100px;} 
.logos a img{max-height: 100%;
}

.logos a img:hover{
    position: fixed;
    max-width: 440px;
    top: 250px; left: 10%;
}

问题:原始图像和放大/移动后的图像后面有灰色背景。此外，放大/移动的图像会闪烁。使用 .png 和 .jpg 图像进行测试时会出现此问题。是否有更好的方法使用 CSS 执行此操作，还是我需要使用 javascript？

我想坚持使用 CSS，因为我更喜欢使用我熟悉的东西，而不是复制和粘贴一段随机代码。这样，当我有新的需求或问题时，我可以弄清楚……或者至少理解提供给我的解决方案。 :) 预先感谢您的帮助!

Answer 1

它闪烁是因为当图像移动时它不再存在因此不再悬停，你可以这样做:

 .logos a,.logos a img
 {
     max-height: 100%;
     display: block;
     width:100px;
     height:200px;
 }

 .logos a:hover img
 {
     border: solid 12px black;
     position: fixed;
     right: 10px; 
     top: 10px; 
     z-index:10;
 }