0

正如标题所述，我想用 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，因为我更喜欢使用我熟悉的东西，而不是复制和粘贴一段随机代码。这样，当我有新的需求或问题时，我就可以解决它……找出或至少理解给我的解决方案。:) 提前感谢您的帮助！

4

1 回答 1

3

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

 .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;
 }
于 2012-06-23T17:21:21.243 回答