javascript - 如何在 WordPress 中将 CSS3 代码转换为 jQuery

Question

我可以使用这段 CSS3 代码实现我想要的效果:

article .post-cover{
transition: opacity .9s ease-in-out;
-moz-transition: opacity .9s ease-in-out;
-webkit-transition: opacity .9s ease-in-out;
}

article:hover .post-cover{ opacity:1;}

但是当我尝试使用以下内容将其转换为 header.php 文件中的 jQuery 时，它不起作用:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $( "article.post-cover" ).hover(function() {
    $( this ).fadeTo( "slow", 1 );
    });
</script>

我也试过，失败了:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $( "div.post-cover" ).hover(function() { //div is the element directly
                                             //encompassing the .post-cover class
    $( this ).fadeTo( "slow", 1 );
    });
</script>

出于兼容性目的，我需要使用 jQuery 或 javascript，请帮忙。

如何控制 fadeTo 的速度？

谢谢。 尤利乌斯

Answer 1

在 CSS 中，您在 article 悬停时将样式应用于 .post-cover。但是您的 Jquery 正在悬停在其自身 post-cover 上。 试试这个:

$("article").hover(function() {       
  $('.post-cover').fadeTo( "slow", 1);
});