1

我有一些带有文字和照片的倾斜容器。我想用 jquery 和 css 添加一些悬停效果。在 Firefox 中，我在制作动画时会得到模糊的文本和图像。

这仅在Firefox中发生。

示例：http: //jsfiddle.net/mmtyphtz/2/

<div id="model">
    <div class="innerModel">
        Hover fb icon<BR><BR>
        <img src="http://litgraf.home.pl/p_fb.jpg"><BR><BR>
        <img src="http://litgraf.home.pl/f.jpg" alt="" class="hoverMe">
    </div>


#model{ 
position:relative; width:100%; background:#292929; 
position:relative; color:#fff; font-size:25px;      
z-index:900;  margin-top:-40px;
-webkit-transform: skewY(1.5deg);
-moz-transform: skewY(1.5deg);
-ms-transform: skewY(1.5deg);
-o-transform: skewY(1.5deg);
transform: skewY(1.5deg);
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
-ms-backface-visibility:     hidden;
-moz-backface-visibility:    hidden;
 backface-visibility:         hidden;
padding: 1px;}

.innerModel{ width:1170px; margin:auto; position: relative;
-webkit-transform: skewY(-1.5deg);
-moz-transform: skewY(-1.5deg);
-ms-transform: skewY(-1.5deg);
-o-transform: skewY(-1.5deg);
 transform: skewY(-1.5deg);
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
-ms-backface-visibility:     hidden;
-moz-backface-visibility:    hidden;
backface-visibility:         hidden;
padding: 1px;
padding-bottom:70px; padding-top:30px;}

.hoverMe{ opacity:.5}
.hoverMe:hover{ opacity:1}

-

$(".hoverMe").hover(function(){
    $(this).fadeTo(1,0.6)
}, function(){
    $(this).fadeTo(1,1)
});

此致

4

0 回答 0