Question

我有一个Jquery手风琴，其中包含一个容器，该容器相对于我放置在其中的按钮设置为绝对。

将鼠标悬停在视频容器中时，将显示视频。当从容器中悬停时，它们消失了。一切适用于笔记本电脑/ PC

当前尝试使按钮在移动屏幕上显示。当然，悬停是行不通的，但是当您再次点击或使用其中一个按钮时，我似乎无法弄清楚如何让按钮在点击时消失并消失

我现在要放的代码将非常粗糙+当然您将看不到任何图像，但是悬停时将看到2个按钮出现。

  $('.video-js').add('.video-button').hover(function () {
            $('.button-visibility').css("display", "inline-block");
        }, function () {
            $(".button-visibility").css("display", "none");        
    });


    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
        $('.video-js').add('.video-button').onClick( function () {
                $('.button-visibility').css("display", "inline-block");
            }, function () {
                $(".button-visibility").css("display", "none");        
        });
    }

.video-button {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
}


.button-visibility {
    display: none;
    cursor: pointer;
}


.video-play, .video-rewind, .video-check, .video-forward {
    background-color: #ffffff;
    padding: 15px 22px 15px 12px;
    text-align: center;
    
}

.video-check, .video-rewind, .video-forward {
    top: 51%;
    padding: 22px 21px;
}


.video-forward{
    margin-left: 100px;
}

.video-rewind {
    margin-left: -100px;
    padding: 22px 21px;
    
}

.video-check {
    margin-left: 200px;
    background-color: 	#00FF00;
    display: none;
}

<link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="accordion">
  <h3> 
     <span> <i class="fas fa-caret-right rotate arrow"></i> Algemene       introductie </span>             
   </h3>
                            
   <div class = "video-parent">
     <video id='my-player' class="video-js" controls data-setup='{"fluid": true}'>
       <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
       <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogv">
       <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
     </video>
   <a class="video-button" id="video-play">></a>
   </div>
   
   <a class="video-button button-visibility video-rewind"> <img src="images/src/rewind%20icon.svg" alt="rewind"></a>
                                    <a class="video-button button-visibility video-forward"> <img src="images/src/forward%20icon.svg" alt="forward"></a>
                                    <a class="video-button video-check"> <img src="images/src/done%20icon.svg" alt="check"></a>
   
   
</div>

<script src="https://vjs.zencdn.net/7.5.4/video.js"></script>

Answer 1

尝试：

$('.video-js').on('tap', (function () {
            $('.button-visibility').css("display", "inline-block");
        }, function () {
            $(".button-visibility").css("display", "none");        
    });

来源：https://api.jquerymobile.com/tap/ 另外，请确保您拥有jquery和jqueryMobile

Answer 2

这不是解决方案，而是解决方法。

在经过一整天的测试和尝试之后，我决定走一条更“简单的路线”。我将按钮放在视频下方。创建了一个.button-visibility.hover类，并将.css更改为.addClass和.removeClass。原因是因为如果我按视频中的对勾标记并切换到桌面，反之亦然，那将会出错。

我还添加了if ($(window).width() > 786 ) {}并将jQuery代码放在其中，因此，如果窗口宽度小于786px，它将按我预期的那样在视频下方显示按钮。

jQuery：如何将“悬停”上显示的按钮更改为移动设备上点击出现的按钮？

2 个答案: