1

我对一个特定的 CSS3 过渡有一点问题（这里）

视频“滑块”类型的东西......当您将鼠标悬停在视频嵌入弹出的标题之一上时，太棒了！但它并没有滑下来！我不知道为什么！它是根据这篇文章构建的（针对视频和 wordpress 循环进行了更改）。

我的HTML如下：

<div id="slider">
<div class="empty">
<!--IMG link here for background image-->
</div>

<?php $currentID = get_the_ID();
$args = array( 
  'post_type' => 'portfolio', 
  'cat' => 5,
  'posts_per_page' => 4, 
  'post__not_in' => array($currentID) 
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>

<a href="<?php the_permalink(); ?>">
<div class="related">
    <div class="each">
   <h2><?php the_title(); ?></h2><br>
   <p><?php getCustomField('vid-intro'); ?></p>
</div>
</div>

<div class="home_video">
<div class="video">
    <?php getCustomField('embed_url'); ?>
</div>
</div>  
</a>

<?php endwhile; ?>                      
</div>

和CSS：

#slider { max-width: 942px; height: 360px; margin: 2em auto 1em auto;
      box-shadow: 0px 0px 1em #999; position: relative; overflow: hidden; }

a .home_video { 
width: 642px; 
height: 360px; 
position: absolute;
top: 360px;
z-index: -1;
-webkit-transition: top .5s ease;
-moz-transition: top .5s ease;
-o-transition: top .5s ease;
-ms-transition: top .5s ease;
transition: top .5s ease;
}

a:hover .home_video {
top: 0px;
z-index: 0;
}

我已经尝试了许多不同的变体在哪里放置过渡，以及如何命名 .home_video div（带或不带 a 标签）并尝试将过渡置于悬停和非悬停状态，但似乎不能让它过渡回来，即使我所有的其他 CSS3 效果都可以。

有什么想法吗？谢谢

4

1 回答 1

1

改变这个：

-webkit-transition: top .5s ease;
-moz-transition: top .5s ease;
-o-transition: top .5s ease;
-ms-transition: top .5s ease;
transition: top .5s ease;

对此：

-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;

希望它会有所帮助...

于 2012-09-12T13:05:23.533 回答