1

我正在 WordPress 中编写一个新主题，我想显示比旧界面更多的动画页面。

我想为我的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-->
4

2 回答 2

2

您需要添加此 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-17T20:32:13.527 回答
0

试试这个小提琴。如果你使用 jQuery 而不仅仅是 css，你可以使这个效果更平滑。

您可以使用fadeIn, fadeOut。使用 jQuery 而不是 CSS3 的优点之一是您获得了良好的浏览器兼容性。

于 2012-11-17T20:45:45.603 回答