0

このコードは Firefox と IE では正常に動作しますが、Chrome では動作しません。カーソルが上にあるときに、既存の画像の上にスライド画像のアニメーションを開始します。Chrome がサポートしていないコードの部分はありますか?

<td width="214">
    <div style="margin-left:19px; margin-top:-8px">
<div class="wrapper">
<img src="icon1.png">
<a href="http://www.somesite.com" target="_blank">
    <img id="slide" src="slide_img.png" />
    </a>
</div>  
</div>
</td>


.wrapper{
position: relative;
overflow: hidden;
width: 197px;
height: 162px;
} 

#slide{
position: absolute;
left: -197px;
width: 197px;
height: 162px;
background: transparent;
transition: 0.5s;
}

.wrapper:hover #slide {
transition: 0.3s;
left: 0;
}
4

2 に答える 2

3

問題は、ラッパーの最初のイメージにありました。img タグを使用するのではなく、div に背景を提供してみてください

フィドル

変更された html

<td width="214">
<div style="margin-left:19px; margin-top:-8px">
<div class="wrapper" >

<a href="http://www.biography.com/imported/images/Biography/Images/Profiles/K/Kaka-559558-1-402.jpg" target="_blank">
    <img id="slide" src="http://3.bp.blogspot.com/-9qLJXsHoVag/T_rA4WlE-PI/AAAAAAAAB0I/I4gHxidRYEY/s320/kaka.jpg" />
    </a>
</div>  
</div>
</td>

とcss

.wrapper{
position: relative;
overflow: hidden;
width: 197px;
height: 162px;
    background:url('http://www.biography.com/imported/images/Biography/Images/Profiles/K/Kaka-559558-1-402.jpg')
}
于 2013-09-30T06:45:27.137 に答える
0

これにはプレフィックスを指定する必要があります

.cssname 
{
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
}
于 2013-09-30T06:59:23.633 に答える