Question

我用一些文字和照片歪斜了容器。我想用jquery和css添加一些关于悬停的效果。在Firefox中，我在制作动画时会看到模糊的文字和图像。

这只发生在firefox中。

<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)
});

最好的问候

CSS歪斜容器和悬停时模糊的图像和文本（firefox）

0 个答案: