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 に答える