2012-09-12 61 views
1

我有一個有點問題,與一個特定的CSS3過渡(hereCSS3不轉出

視頻「滑蓋」式的東西......當你將鼠標懸停在標題的視頻嵌入持久性有機污染物之一很棒!但它不會滑落!我不知道爲什麼!它由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 (帶或不帶標籤),並嘗試將轉換放在懸停和非懸停狀態,但似乎無法讓它轉換回來,儘管我的所有其他CSS3效果都是如此。

任何想法傢伙? 感謝

回答

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; 

希望這將有助於...

+0

天才!謝謝! :) – lukeseager