使用 CSS（无 JavaScript）IE 9 及更高版本在悬停时放大和移动图像答案

【问题标题】：Enlarge & move images on hover with CSS (no JavaScript) IE 9 and above使用 CSS（无 JavaScript）IE 9 及更高版本在悬停时放大和移动图像
【发布时间】：2012-06-25 15:22:48
【问题描述】：

正如标题所述，我想使用 CSS 放大和移动几张图片到固定位置。每个图像将放大到相同的宽度并移动到相同的位置。我知道这可以通过 javascript 和 CSS3 转换属性来实现。我想知道它是否可以仅使用 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，因为我更喜欢使用我熟悉的东西，而不是复制和粘贴随机的一段代码。这样，当我有一个新的需求或问题时，我可以解决它……找出或至少理解给我的解决方案。 :) 提前感谢您的帮助！

【问题讨论】：

更全面：您需要支持哪些版本的 IE 以及正在使用哪些类型的图像（.gif、.png、jpg）？
IE9 & 10. 图片为 .png 和 .jpg

标签： css image internet-explorer resize hover

【解决方案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;
 }

【讨论】：

如果此答案解决了您的问题，您可以接受它作为正确答案。