Question

背景：嗨，我想制作一个图像库，当我悬停时，我想要发生两件事。屏幕截图将更好地澄清问题。 When I hover over the black and white image or the circle itself, the circle should expand and become a rectangle overlay.发生这种情况时，视频必须播放而不是现有的黑白图像。矩形叠加层和视频必须完全覆盖黑白图像。

问题：我只能扩展圈子或播放视频。此外，当我将鼠标悬停在图像上时，圆圈无法展开，我需要明确地将鼠标悬停在圆圈上以实现此目的。

由于我处于慢速连接状态，因此无需上传视频以进行演示。

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 calign">

         <div class="swp_circle" id="hoverme"></div>

         <video class="thevideo" loop preload="none">
            <source src="videos/chennai_final.mp4" type="video/mp4" >
        </video>
        <div class="text_container_double" id="chennai_placename">
                <p><a href="#" class="swp_font city_name" id="chennai_link">Chennai</a></p>
        </div>

https://jsfiddle.net/0fqquuyr/

Answer 1

我会使用javascript来触发你的动画，因为使用try来控制元素之间的事件更简单（在我看来）。圆圈动画的答案至少是：

https://jsfiddle.net/Lmy3evd3/2/

.swp_circle:hover, .hover{
   ... your css properties ...
}

javascript：

function hoverVideo(e) {  
    $("#hoverme").addClass("hover");
    $('video', this).fadeIn('normal'); 
    //$('video', this).get(0).play(); 
}

function hideVideo(e) {
    //$('video', this).get(0).pause(); 
    $("#hoverme").removeClass("hover");
    $('video', this).fadeOut('normal'); 
    $('.swp_circle',this).fadeIn('normal'); 
}

我评论了视频播放/暂停，因为它在小提琴上抛出错误，但我认为那部分是有用的。

视频播放和圆圈同时扩展

1 个答案: