添加淡入效果li：懸停與jquery

我正在編寫WordPress的新主題，我想顯示比舊界面更多的動畫頁面。添加淡入效果li：懸停與jquery

我想爲我的li:hover元素添加一些效果（即淡入效果）。我怎樣才能做到這一點？

這裏是我的CSS：

/*Videos*/ 
.PozVideos {float:left;width:940px;min-height:155px;margin:0px 0px 20px 0px;} 
.PozVideos .Caption {float:left;width:930px;padding:0px 0px 10px 10px;margin-bottom:8px;border-bottom:1px solid #F8F8E6;height:25px;line-height:33px;font-size:14px;color:#fff;overflow: hidden;} 
.PozVideos ul {padding:0px;margin:0px 0px 5px 7px;} 
.PozVideos ul li {float:left;width:150px;height:100px;margin-right:5px;background:#F8F8E6;text-align:center;} 
.PozVideos ul li img {float:left;width:140px;border:none;height:90px;padding:5px;} 
.PozVideos ul li:hover {float:left;opacity:0.7;filter:alpha(opacity=70); /* For IE8 and earlier */} 
.PozVideos .Title {float:left;margin:-35px 0px 0px 0px;width:150px;height:30px;line-height:15px;} 
.TransationsImages {opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */} 
.TransationsImagesHover {opacity:0.7;filter:alpha(opacity=70); /* For IE8 and earlier */} 
.TransationsTitle {opacity:0.9;filter:alpha(opacity=0.9); /* For IE8 and earlier */} 

.Pozn-img-play { 
    background:transparent; 
    position:relative; 
    z-index:1; 
    cursor:pointer; 
    width:150px; 
    height:100px; 
    border:0px; 

} 

.Pozn-img-play:hover { 
    background:url('img/play.png') no-repeat center center; 
}

HTML：

<!--Videos--> 
<div class="PozVideos BgPurple RadiusTopTen"> 
    <div class="Caption">Video Galeri</div> 
    <ul> 
     <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a><div class="Pozn-img-play"></div></div></li> 
     <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li> 
     <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li> 
     <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li> 
     <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li> 
     <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li> 
    </ul> 
</div> 
<!--Videos-->

來源

2012-11-17 Fatih Toprak

其實我是新的jquery不能做任何事情。只想顯示帶有一些動畫的播放圖標（.Pozn-img-play）供li hover –

也非常感謝你@David，我也開始與你一起學習英語..（：（我是土耳其語，所以我的英語不是真的很好..） –

您需要添加此CSS：

.Pozn-img-play { 
     background:transparent; 
     position:relative; 
     z-index:1; 
     cursor:pointer; 
     width:150px; 
     height:100px; 
     border:0px; 
     opacity: 1; 
     transition: opacity .5s ease-in-out; 
     -moz-transition: opacity .5s ease-in-out; 
     -webkit-transition: opacity .5s ease-in-out; 

    } 

    .Pozn-img-play:hover { 
     background:url('img/play.png') no-repeat center center; 
     opacity: 0.1; 
    }

來源

2012-11-17 20:32:13

謝謝，但這是好的IE瀏覽器？我認爲jQuery的效果方法比CSS 3過渡methots？ –

在這裏檢查http://caniuse.com/ –

太棒了！非常感謝你的快速和很好的回答;） –

試試這個fiddle。如果您使用jQuery而不是僅使用CSS，則可以使此效果更加流暢。可以使用fadeIn,fadeOut。使用jQuery而不是CSS3的一個優點是您可以獲得良好的瀏覽器兼容性。

來源

2012-11-17 20:45:45 SachinGutte

添加淡入效果li：懸停與jquery

回答

相關問題