Question

我对一个特定的CSS3转换（here）有点问题

视频＆＃39;滑块＆＃39;类型的东西......当你将鼠标悬停在其中一个标题上时，视频嵌入会弹出，太棒了！但它并没有滑下来！我不明白为什么！它是基于this文章构建的（针对视频和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效果都可以，但它似乎无法让它过渡回来。

任何想法的家伙？感谢

Answer 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;

希望它会有所帮助...

CSS3没有过渡

1 个答案: